Heim > Artikel > Web-Frontend > So verwenden Sie CSS3-Box-Shadow

So verwenden Sie CSS3-Box-Shadow

php中世界最好的语言Original: 2017-11-24 09:22:201850Durchsuche

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Welche Maßeinheiten gibt es in HTML?Nächster Artikel：Welche Maßeinheiten gibt es in HTML?

In Verbindung stehende Artikel

Mehr sehen