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:

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!