Detaillierte Erläuterung von Beispielen für den äußeren Schatten und das äußere Leuchten von Box-Shadow in CSS3 (Bild)-CSS-Tutorial-php.cn

Detaillierte Erläuterung von Beispielen für den äußeren Schatten und das äußere Leuchten von Box-Shadow in CSS3 (Bild)

黄舟

Freigeben： 2017-07-21 13:58:11

Original

3576 Leute haben es durchsucht

Grundlegende Beschreibung:

Äußerer Schatten: Box-Shadow: X-Achse Y-Achse Rpx-Farbe;

Attributbeschreibung (entsprechende Reihenfolge): X-Achse des Schattens (negative Werte können verwendet werden) Y-Achse des Schattens (negative Werte können verwendet werden) Schattenunschärfewert (Größe) Farbe des Schattens

Inner Schatten: Box-Shadow: 🎜> Hinweis (PS) : Dieses Attribut wird für Boxmodelle wie (p, p, h1, h2, h3, h4, h5, h6 usw.) verwendet und wird nicht zum Festlegen des Textschattens verwendet 🎜> legt den Textschatten fest, siehe Wissenspunkt: text-shadow

(Ähnlich)

Da es sich um ein neues Attribut handelt, um mit den wichtigsten Browsern kompatibel zu sein und Unterstützen Sie niedrigere Versionen dieser Hauptbrowser. Wenn Sie das Box-Shadow-Attribut in Mainstream-Browsern verwenden, müssen wir den Namen der Eigenschaft in der Form -webkit-box-shadow schreiben. Der Firefox-Browser muss als eine Form von -moz-box-shadow geschrieben werden. >Um die Eigenschaften von box-shadow besser zu verstehen, führen Sie einige kleine Tests durch: (Zur Vereinfachung der direkten Verschachtelung von Stilen innerhalb von Tags) Test 1:

(Da die X-Achse und die Y-Achse nicht dorthin verschoben werden, wo die Einstellungswerte liegen sind, werden der Radiusbereich und die Farbe wirksam)

<p style="box-shadow: 0 0 10px #f00; border:1px solid green">
</p>  box-shadow: 0 0 10px #f00

Nach dem Login kopieren

Test 2:

Anders als bei Test 1 ändern sich die X-Achse und die Y-Achse. Der

positive Wert Detaillierte Erläuterung von Beispielen für den äußeren Schatten und das äußere Leuchten von Box-Shadow in CSS3 (Bild) (positiver Wert geht nach rechts und unten) So wird es so‍

Test 3:

<p style="box-shadow:4px 4px 10px #f00; border:1px solid green">
</p> box-shadow:4px 4px 10px #f00;

Nach dem Login kopieren

Detaillierte Erläuterung von Beispielen für den äußeren Schatten und das äußere Leuchten von Box-Shadow in CSS3 (Bild)

<p style="box-shadow:-4px -4px 10px #f00; border:1px solid green">
</p> box-shadow:-4px -4px 10px #f00;

Nach dem Login kopieren

Anders als Test 2 Die X-Achse und Y-Achse haben sich in

negative Werte (negative Werte) geändert nach links und oben gehen), also wird es so‍

Detaillierte Erläuterung von Beispielen für den äußeren Schatten und das äußere Leuchten von Box-Shadow in CSS3 (Bild)

Ähnlich: Sie können die Wirkung eines positiven und eines negativen Werts testen, aber wir werden den Test hier nicht durchführen. . . . . . . .

Test 4:

<p  style="box-shadow:-10px 0px 10px red,   /*左边阴影*/ 
0px -10px 10px #000,  /*上边阴影*/ 
10px 0px 10px green,  
/*右边阴影*/ 
0px 10px 10px blue;" 
/*下边阴影*/ 
></p>

Nach dem Login kopieren

Wenn Sie diesen Code sehen, wird es sich chaotisch anfühlen, aber nachdem Sie das Effektbild gesehen haben, können Sie verstehen, wie es gemacht wird. Es geht nur darum, die X-Achse zu ändern Es gibt auch Y-Achsen-Positionen und Farbwerte (durch Kommas getrennt). Üben Sie einfach ein paar Mal

Detaillierte Erläuterung von Beispielen für den äußeren Schatten und das äußere Leuchten von Box-Shadow in CSS3 (Bild)

测试5：--内阴影

<p style="box-shadow: 0px 0px 10px red inset; border:1px solid green">
</p> box-shadow: 0px 0px 10px red inset;

Nach dem Login kopieren

与上面写法相同唯一不同的是添加了一个inset 其它属性与外阴影相同

Detaillierte Erläuterung von Beispielen für den äußeren Schatten und das äußere Leuchten von Box-Shadow in CSS3 (Bild)

百变不离其宗，练习就能熟悉，懂了就知道原理,随意改写，在配合css3的动画效果，闪光层（字）都很简单实现。。希望对你有帮助。。

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Beispielen für den äußeren Schatten und das äußere Leuchten von Box-Shadow in CSS3 (Bild). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!