Heim > Artikel > Web-Frontend > So verwenden Sie CSS3-Box-Shadow
So verwenden Sie CSS3-Box-Shadow
- php中世界最好的语言Original
- 2017-11-24 09:22:201920Durchsuche
Wir wissen, dass Box-Shadow das Stilwort Box-Shadow in CSS3 ist. Schauen wir uns also an, wie Box-Shadow heute verwendet wird. Hier ist ein kleines Beispiel für Sie.
Wort im Box-Shadow-Stil: box-shadow
Syntax
div{box-shadow:0 0 1px #000 inset;}
bedeutet, dass der Rahmenabstand 0 bis beträgt links Die Schattenfarbe des oberen 0- und 1-Pixel-Schattenbereichs ist Schwarz (#000), wobei der Einschub den Schatten innerhalb der Box darstellt und ohne Einschub den Schatten außerhalb der Box darstellt.
Hinweis:
box-shadow:0px 0px 1px #000
Wenn der erste Wert 0 ist, bedeutet dies, dass der Schatten des linken und rechten Rands einen Bereich von 1 Pixel hat
Der erste Wert ist eine positive Ganzzahl , die den linken Randschatten darstellt
Der erste Wert ist eine negative Ganzzahl, die den rechten Randschatten darstellt
Ähnlich
Der zweite Der erste Wert ist 0, was den Schatten des oberen und unteren Randes darstellt
Der zweite Wert ist eine positive Ganzzahl, die den Abstand des 1-Pixel-Schattens vom oberen Rand darstellt
Der erste Wert ist eine negative Ganzzahl, die die Schatteneinstellung des unteren Randes darstellt
Legen Sie den inneren Schatten und den äußeren Schatten als Fälle für DIV-Box bzw. BildIMG fest.
1. Case-HTML-Code
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>对象阴影 在线演示 </title> <link href="images/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div>盒子对象阴影测试</div> <div class="box">DIV盒子内阴影</div> <div>图片对象阴影测试</div> <div class="box2"><img src="images/div-logo.gif" /></div> </body> </html>
2. Case-CSS-Code
.box {box-shadow:5px 2px 6px #000 inset; width:300px; height:80px; margin:0 auto}
.box2 img {box-shadow:5px 2px 6px #000}Das ist alles für die Box-Shadow-Nutzung in CSS3, bitte kommen Sie für weitere spannende Codes Folgen Sie der chinesischen PHP-Website anderen verwandten Artikeln!
Verwandte Lektüre:
Was tun, wenn sich DIVs in HTML überlappen?
Was ist der Unterschied zwischen br, p und DIV in HTML?
So verwenden Sie den absoluten und relativen Pfad von HTML
Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3-Box-Shadow. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!