Heim > Artikel > Web-Frontend > 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:242616Durchsuche

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:
So erstellen Sie einen Randschatteneffekt mithilfe der Box-Shadow-Eigenschaft von CSS3

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
So erstellen Sie einen Randschatteneffekt mithilfe der Box-Shadow-Eigenschaft von CSS3

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;   
}

So erstellen Sie einen Randschatteneffekt mithilfe der Box-Shadow-Eigenschaft von CSS3

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.
So erstellen Sie einen Randschatteneffekt mithilfe der Box-Shadow-Eigenschaft von CSS3

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;   
}

So erstellen Sie einen Randschatteneffekt mithilfe der Box-Shadow-Eigenschaft von CSS3

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;   
}

So erstellen Sie einen Randschatteneffekt mithilfe der Box-Shadow-Eigenschaft von CSS3

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;   
}

So erstellen Sie einen Randschatteneffekt mithilfe der Box-Shadow-Eigenschaft von CSS3

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:
So erstellen Sie einen Randschatteneffekt mithilfe der Box-Shadow-Eigenschaft von CSS3

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;   
}

So erstellen Sie einen Randschatteneffekt mithilfe der Box-Shadow-Eigenschaft von CSS3

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~
So erstellen Sie einen Randschatteneffekt mithilfe der Box-Shadow-Eigenschaft von CSS3

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!

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：Analysieren Sie die Attribute eines Tags mit und ohne Small-Hand-CSSNächster Artikel：Analysieren Sie die Attribute eines Tags mit und ohne Small-Hand-CSS

In Verbindung stehende Artikel

Mehr sehen