Heim >Web-Frontend >CSS-Tutorial >So erzielen Sie einen langen Schatteneffekt für Schriftarten in CSS

So erzielen Sie einen langen Schatteneffekt für Schriftarten in CSS

王林
王林nach vorne
2020-05-18 09:12:453078Durchsuche

So erzielen Sie einen langen Schatteneffekt für Schriftarten in CSS

Werfen wir zunächst einen Blick auf den Implementierungseffekt, wie in der folgenden Abbildung dargestellt:

So erzielen Sie einen langen Schatteneffekt für Schriftarten in CSS

Wichtige Attribute:

text Die Eigenschaft -shadow legt einen Schatten auf den Text.

(Empfohlenes Video-Tutorial: CSS-Video-Tutorial)

HTML-Code:

<div class="long-shadow">屮艸芔茻</div>

CSS-Code:

 .loop(@counter) when (@counter > 0) {
    .loop((@counter - 1));
    text-shadow+: (1px * @counter) (1px * @counter) #2d585a;
  }
 .long-shadow{
    overflow: hidden;
    background-color: #5f9ea0;
    width:800px;
    height: 160px;
    line-height: 160px;
    text-align: center;
    letter-spacing: 80px;
    color: #fff;
    font-size: 100px;
    .loop(200);
  }

Empfohlenes Tutorial: Grundlegendes Tutorial für den Einstieg in CSS

Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen langen Schatteneffekt für Schriftarten in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:jb51.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen