Wie füge ich mit CSS einen Schatteneffekt hinzu? Kann mithilfe des text-shadow-Attributs und des box-shadow-Attributs hinzugefügt werden. Der folgende Artikel stellt Ihnen vor, wie das Text-Shadow-Attribut und das Box-Shadow-Attribut Schatteneffekte hinzufügen. Ich hoffe, dass es für Sie hilfreich ist.
Empfohlenes Handbuch : CSS3-Referenzhandbuch für die neueste Version
1: Hinzugefügt Textschatteneffekt (Textschattenattribut)
1. Was ist Textschatten?
text-shadow kann das Hinzufügen von Schatten zu Text unterstützen, sodass wir CSS3-Attribute verwenden können, um die Texttextur während des Designs zu erhöhen, ohne Bilder zu verwenden. Zu den derzeit unterstützten Browsern gehören Firefox 3.1+, Safari 3+, Opera 9.5+ und andere moderne Browser (. Die Daten können verzerrt sein. Natürlich kann die IE-Familie dies nicht unterstützen.
text-shadow:color length length length;
Positive Werte auf der X-Achse bedeuten nach rechts und negative Werte auf der linken Seite. Ebenso bedeuten negative Werte auf der Y-Achse nach oben Werte können Null oder leer sein (werden standardmäßig verarbeitet)
Zum Beispiel:
text-shadow:0.1em 0.1em 0.3em #333333;
3. Codebeispiel
Die Hauptverwendung ist die Schattenliste von Textschatten. Durch die Verwendung einer angemessenen Farbanpassung können wir den gewünschten Effekt erzielen.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字阴影效果</title>
<style type="text/css">
.demo{
width: 600px;
overflow: hidden;
margin: 10px auto;
}
p {
width: 300px;
font-size: 3em;
margin: 10px;
padding: 20px;
text-align: center;
}
.p1 {
text-shadow: 0.2em 0.5em 0.1em #600, -0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006;
color: red;
}
.p2 {
background: black;
text-shadow: 0 -5px 4px #FF3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
color: red;
}
.p3 {
text-shadow: -1px -1px white, 1px 1px #333;
color: #D1D1D1;
font-weight: bold;
background: #CCC;
}
.p4 {
text-shadow: 1px 1px white, -1px -1px #333;
color: #D1D1D1;
font-weight: bold;
background: #CCC;
}
.p5 {
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
color: #ffffff;
background: #CCC;
}
.p6 {
text-shadow: 0 0 0.2em #F87, 0 0 0.2em #f87;
color: #d1d1d1;
background: #CCC;
}
</style>
</head>
<body>
<div class="demo">
<p class="p1">多色阴影效果</p>
<p class="p2">火焰效果</p>
<p class="p3">立体凸起效果</p>
<p class="p4">立体凹下效果</p>
<p class="p5">描边效果</p>
<p class="p6">外发光效果</p>
</div>
</body>
</html>
Empfohlene verwandte Artikel:
1.Wie implementiert man einen einseitigen Schatteneffekt in CSS?2. Box-(Rahmen-)Schatteneffekt hinzufügen (Box-Shadow-Attribut)
2.Wie implementiert man einen Box-Schatten in CSS3? Schatteneffekt in CSS3
Verwandte Video-Tutorials: 1.
CSS-Video-Tutorial – Jade Girl Heart Sutra Edition
1. Die Syntax von Box-Shadow
E {Box-Shadow: Inset X-Offset Y-Offset Blur-Radius Spread-Radius Farbe};E {Box-Shadow: Projektionsmethode X-Achsen-Versatz Y-Achsen-Versatz Schatten Unschärferadius Schatten Ausbreitungsradius Schatten Farbe };
Wert:
1. Schattentyp: Dieser Parameter ist optional. Wenn der einzige Wert „Einsatz“ verwendet wird, wird der äußere Schatten in einen umgewandelt innerer Schatten;
4. Schattenunschärferadius: Dieser Parameter ist optional und kann nur positiv sein. Je größer der Wert, desto größer der Wert den Rand des Schattens verwischen;
5. Schattenausdehnungsradius: Dieser Parameter ist optional und sein Wert kann ein positiver oder negativer Wert sein, andernfalls wird er erweitert
6. Schattenfarbe: Wenn keine Farbe festgelegt ist, verwendet der Browser die Standardfarbe. Die Standardfarben der Browser sind jedoch unterschiedlich, insbesondere bei Safari- und Chrome-Browsern unter dem Webkit-Kernel farblos, also transparent sein. Es wird empfohlen, diesen Parameter nicht wegzulassen.
2. Berücksichtigen Sie die Kompatibilität
//Firefox4.0- -moz-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色; //Safari and Google chrome10.0- -webkit-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色; //Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9 box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>box-shadow的用法</title>
<style type="text/css">
.demo {
width: 800px;
overflow: hidden;
margin: 50px auto;
}
.demo * {
width: 150px;
height: 150px;
margin: 40px 20px;
background-color: grey;
display: inline-block;
}
/*右下阴影*/
.box-shadow-1 {
-webkit-box-shadow: 3px 3px 3px;
-moz-box-shadow: 3px 3px 3px;
box-shadow: 3px 3px 3px;
}
/*四边同色阴影*/
.box-shadow-2 {
-webkit-box-shadow: 0 0 10px #0CC;
-moz-box-shadow: 0 0 10px #0CC;
box-shadow: 0 0 10px #0CC;
}
/*四边同色阴影扩展*/
.box-shadow-3 {
-webkit-box-shadow: 0 0 10px 15px #0CC;
-moz-box-shadow: 0 0 10px 15px #0CC;
box-shadow: 0 0 10px 15px #0CC;
}
/*四边同色内阴影*/
.box-shadow-4 {
-webkit-box-shadow: inset 0 0 10px #0CC;
-moz-box-shadow: inset 0 0 10px #0CC;
box-shadow: inset 0 0 10px #0CC;
}
/*四边异色外阴影*/
.box-shadow-5 {
box-shadow: -10px 0 10px red, /*左边阴影*/
10px 0 10px yellow, /*右边阴影*/
-10px 10px blue, /*顶部阴影*/
10px 10px green;
/*底边阴影*/
}
/*叠加异色阴影*/
.box-shadow-6 {
box-shadow: 0 0 10px 5px black, 0 10px 20px red;
}
/*兼容ie*/
.box-shadow {
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);
/*for ie6,7,8*/
background-color: #ccc;
-moz-box-shadow: 2px 2px 5px #969696;
/*firefox*/
-webkit-box-shadow: 2px 2px 5px #969696;
/*webkit*/
box-shadow: 2px 2px 5px #969696;
/*opera或ie9*/
}
</style>
</head>
<body>
<div class="demo">
<div class="box-shadow-1">右下阴影</div>
<div class="box-shadow-2">四边同色阴影</div>
<div class="box-shadow-3">四边同色阴影扩展</div>
<div class="box-shadow-4">四边同色内阴影</div>
<div class="box-shadow-5">四边异色外阴影</div>
<div class="box-shadow-6">叠加异色阴影</div>
<div class="box-shadow">兼容ie</div>
</div>
</body>
</html>Rendering:
Das obige ist der detaillierte Inhalt vonWie füge ich einen Schatteneffekt mit CSS hinzu? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
