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;
Nach dem Login kopieren
Länge: bezieht sich auf „Länge in X-Achsen-Richtung, Länge in Y-Achsen-Richtung, Schattenunschärferadius“ in der Reihenfolge und gibt einen Längenwert an, der aus einer Gleitkommazahl und einer Einheitenkennung besteht, die ein negativer Wert (oder 0) sein kann Wert), der den horizontalen Ausdehnungsabstand des Schattens angibt.
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;
Nach dem Login kopieren
Der erste Wert des text-shadow-Attributs stellt die horizontale Verschiebung dar, der zweite Wert repräsentiert Vertikale Verschiebung, positiver Wert bedeutet horizontale Verschiebung. Der dritte Wert stellt den Unschärferadius dar (dieser Wert ist optional). optional). Dieser Farbwert kann vor oder nach dem Längenwert des Schatteneffekts platziert werden. Wenn keine Farbe angegeben ist, wird stattdessen der Wert des Farbattributs verwendet.
Das text-shadow-Attribut akzeptiert eine durch Kommas getrennte Liste von Schatteneffekten, die auf den Text des Elements angewendet werden sollen. Schatteneffekte werden in der angegebenen Reihenfolge angewendet, es ist also möglich, dass sie sich gegenseitig überdecken, jedoch nicht den Text selbst. Schatteneffekte verändern die Abmessungen des Rahmens nicht, können jedoch über dessen Grenzen hinausgehen.
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>Nach dem Login kopieren
Rendering:
Empfohlene verwandte Artikel:
1.Wie implementiert man einen einseitigen Schatteneffekt in CSS?
2.Wie implementiert man einen Box-Schatten in CSS3? Schatteneffekt in CSS3
Verwandte Video-Tutorials: 1.
CSS-Video-Tutorial – Jade Girl Heart Sutra Edition
2. Box-(Rahmen-)Schatteneffekt hinzufügen (Box-Shadow-Attribut)
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;
2. Versatz: Bezieht sich auf den vertikalen Versatz des Schattens. Bei positiven Werten liegt der Schatten bei die Oberseite des Objekts;
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轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
Nach dem Login kopieren
3. Codebeispiel
<!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>Nach dem Login kopieren
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!
