Heim > Artikel > Web-Frontend > Erstellen Sie Falloff-Schatten mit CSS

Erstellen Sie Falloff-Schatten mit CSS

WBOYnach vorne: 2023-08-26 08:25:091428Durchsuche

使用 CSS 创建衰减阴影

Der Schattenfilter wird verwendet, um einen abfallenden Schatten in einer bestimmten Richtung und Farbe zu erzeugen.

Die folgenden Parameter können in diesem Filter verwendet werden:

Seriennummer	Parameter und Beschreibung
1	Farbe Die gewünschte Farbtonfarbe.
2	Richtung Die Richtung der Unschärfe, im Uhrzeigersinn, in 45-Grad-Schritten. Der Standardwert ist 270 (links). 0 = Oben 45 = Oben rechts 90 = Rechts 135 = Unten rechts 180 = Unten 225 = Unten links 270 = Links 315 = Oben links

Seriennummer

Parameter und Beschreibung

Farbe

Die gewünschte Farbtonfarbe.

Richtung

Die Richtung der Unschärfe, im Uhrzeigersinn, in 45-Grad-Schritten. Der Standardwert ist 270 (links).

0 = Oben

45 = Oben rechts

90 = Rechts

135 = Unten rechts

180 = Unten

225 = Unten links

270 = Links

315 = Oben links

Beispiel

Sie können versuchen, den folgenden Code auszuführen, um den Schattenfilter zu implementieren –

Demo

<html>
   <head>
   </head>

   <body>

      <img src="/css/images/logo.png" alt="CSS Logo"style="FILTER: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">

      <p>Text Example:</p>

      <div style="width: 357;
         height: 50;
         font-size: 30pt;
         font-family:
         Arial Black;
         color: red;
         Filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials</div>
   </body>

</html>

Das obige ist der detaillierte Inhalt vonErstellen Sie Falloff-Schatten mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css

Stellungnahme：

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

Vorheriger Artikel：Animationseffekt mit CSS einblendenNächster Artikel：Animationseffekt mit CSS einblenden

In Verbindung stehende Artikel

Mehr sehen