Heim >Web-Frontend >CSS-Tutorial >So erstellen Sie einen Randschatteneffekt mithilfe der Box-Shadow-Eigenschaft von CSS3
So erstellen Sie einen Randschatteneffekt mithilfe der Box-Shadow-Eigenschaft von CSS3
- 高洛峰Original
- 2017-03-13 17:59:242775Durchsuche
In diesem Artikel wird hauptsächlich das Box-Shadow-Attribut von CSS3 zum Erstellen eines Randschatteneffekts vorgestellt. Das Box-Shadow-Attribut ist immer noch sehr leistungsfähig. Es kann die horizontale oder vertikale Position des Schattens festlegen Für Farbe und Größe können sich Freunde in Not auf die
-Effektdemonstration beziehen: 
box-shadow fügt der Box einen oder mehrere Schatten hinzu. Das Box-Shadow-Attribut wird in IE9+, Firefox 4, Chrome, Opera und Safari 5.1.1 unterstützt.
Syntax:
Der Code lautet wie folgt:
box-shadow: h-shadow v-shadow blur spread color inset;
h-Shadow, V-Shadow sind erforderlich. Horizontale und vertikale Schattenposition. Zuordnung ist erlaubt. Unschärfe optional, Unschärfeabstand. Spread optional, die Größe des Schattens. Farbe optional, die Farbe des Schattens. Inset ist optional und ändert den äußeren Schatten (Ausgang) in den inneren Schatten.
Sehen wir uns ein paar einfache Beispiele an:
<body> <p class="box"> <span class="caption">A</span> </p> <p class="box"> <span class="caption">B</span> </p> <p class="box"> <span class="caption">C</span> </p> <p class="box"> <span class="caption">D</span> </p> <p class="box"> <span class="caption">E</span> </p> <p class="box"> <span class="caption">F</span> </p> <p class="box"> <span class="caption">G</span> </p> <p class="box"> <span class="caption">H</span> </p> </body>
Legen Sie zunächst einfach ihre Stile fest:
.box {
background-color: #fff;
border: 3px solid #ccc;
float: left;
margin: 20px 40px 0 0;
height: 65px;
width: 160px;
text-align: center;
}
.caption {
font-size: 20px;
position: relative;
top: 20px;
} Dann üben wir nacheinander die Verwendung verschiedener Parameter. Grundsätzlich müssen Sie bei Verwendung von Box-Shadow mindestens zwei Parameter angeben: H-Shadow und V-Shadow:
.box:nth-child(1) {
-webkit-box-shadow: 3px 3px #f3d42e;
-moz-box-shadow: 3px 3px #f3d42e;
box-shadow: 3px 3px #f3d42e;
}Wenn der Verschiebungsabstand ist positiv Das heißt, nach rechts oder unten verschieben; andernfalls nach links oder oben verschieben 
plus einem Unschärferadius von 5 Pixeln:
.box:nth-child(2) {
-webkit-box-shadow: 3px 3px 5px #f3d42e;
-moz-box-shadow: 3px 3px 5px #f3d42e;
box-shadow: 3px 3px 5px #f3d42e;
} 
Der Diffusionsabstand vergrößert den tatsächlichen Schattenbereich:
.box:nth-child(3) {
-webkit-box-shadow: 3px 3px 0 5px #f3d42e;
-moz-box-shadow: 3px 3px 0 5px #f3d42e;
box-shadow: 3px 3px 0 5px #f3d42e;
}Der Verschiebungsabstand wird zum Diffusionsabstand addiert. Wenn der Wert also negativ ist, beträgt der Der Schattenbereich wird reduziert. 
Der diffuse Teil hat auch einen unscharfen Effekt:
.box:nth-child(4) {
-webkit-box-shadow: 3px 3px 5px 5px #f3d42e;
-moz-box-shadow: 3px 3px 5px 5px #f3d42e;
box-shadow: 3px 3px 5px 5px #f3d42e;
}
Wenn der Verschiebungsabstand nicht eingestellt ist, wird der Unschärfeeffekt direkt um den Block herum angezeigt:
.box:nth-child(5) {
-webkit-box-shadow: 0 0 15px #f3d42e;
-moz-box-shadow: 0 0 15px #f3d42e;
box-shadow: 0 0 15px #f3d42e;
}
Plus die Diffusionsentfernung:
.box:nth-child(6) {
-webkit-box-shadow: 0 0 15px 5px #f3d42e;
-moz-box-shadow: 0 0 15px 5px #f3d42e;
box-shadow: 0 0 15px 5px #f3d42e;
}
Zusätzlich, wenn Sie es hinzufügen Wenn Sie den Parameter „Inset“ verwenden, wird der ursprünglich außerhalb des Blocks angezeigte Schatteneffekt zum inneren Schatteneffekt:
.box:nth-child(7) {
-webkit-box-shadow: 3px 3px #f3d42e inset;
-moz-box-shadow: 3px 3px #f3d42e inset;
box-shadow: 3px 3px #f3d42e inset;
} Beachten Sie dies sorgfältig? Wenn der Verschiebungsabstand ursprünglich positiv ist, wird er nach rechts oder unten verschoben, aber aufgrund des Einfügungsparameters ist der Effekt umgekehrt: 
Fügen Sie den Unschärferadius und den Diffusionsabstand hinzu:
.box:nth-child(8) {
-webkit-box-shadow: 3px 3px 5px 5px #f3d42e inset;
-moz-box-shadow: 3px 3px 5px 5px #f3d42e inset;
box-shadow: 3px 3px 5px 5px #f3d42e inset;
}
Wenn dem Element mehrere Sätze von Schatteneinstellungen hinzugefügt werden:
.box:nth-child(9) {
-webkit-box-shadow: 13px 13px #f3d42e, -10px 10px #33d42e, -5px -10px #ff0d2d, 10px -8px #034d5e;
-moz-box-shadow: 13px 13px #f3d42e, -10px 10px #33d42e, -5px -10px #ff0d2d, 10px -8px #034d5e;
box-shadow: 13px 13px #f3d42e, -10px 10px #33d42e, -5px -10px #ff0d2d, 10px -8px #034d5e;
}Die hierarchische Beziehung der Schatten besteht darin, dass die Ebene zuerst höher eingestellt wird~
Wenn Sie mit der Verwendung von Box-Shadow vertraut sind, ist dies der Fall wird sehr einfach sein und schnell verschiedene Elemente mit designähnlicheren Randeffekten hinzufügen!
Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Randschatteneffekt mithilfe der Box-Shadow-Eigenschaft von CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!