So erstellen Sie einen Randschatteneffekt mithilfe der Box-Shadow-Eigenschaft von CSS3-CSS-Tutorial-php.cn

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

高洛峰

Freigeben： 2017-03-13 17:59:24

Original

2710 Leute haben es durchsucht

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;

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!