Heim > Artikel > Web-Frontend > CSS-Schatteneffekt: Wie stellt man den CSS-Randschatten ein?
CSS-Schatteneffekt: Wie stellt man den CSS-Randschatten ein?
- 不言Original
- 2018-09-05 17:20:0610468Durchsuche
Im Prozess des Webdesigns müssen wir häufig einige Spezialeffekte auf der Webseite festlegen, damit die gestaltete Webseite schöner aussieht. In diesem Artikel erfahren Sie, wie Sie über CSS einen Schatteneffekt für den Rand festlegen. Der CSS-Schatteneffekt kann sein. Dadurch wird der gestaltete Rahmen dreidimensionaler. Schauen wir uns ohne weiteres genauer an, wie der CSS-Randschatteneffekt eingestellt wird.
Wenn wir den Randschatten festlegen, ist ein wesentliches Attribut box-shadow, mit dem der Box ein oder mehrere Schatten hinzugefügt werden können. Schauen wir uns unten ein konkretes Beispiel an.
<!DOCTYPE html>
<html>
<head>
<style>
body{margin:30px;background-color:#E9E9E9;}
div.polaroid{width:294px;padding:10px 10px 20px 10px;border:1px solid #BFBFBF;background-color:green;
/* 设置阴影效果 */
box-shadow:5px 5px 6px #090;}
div.rotate_left
{float:left;
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
transform:rotate(7deg);}
}
</style>
</head>
<body>
<div class="polaroid rotate_left">
<img src="/i/ballade_dream.jpg" alt="郁金香" width="284" style="max-width:90%" />
<p class="caption">鲜花郁金香，花名：Ballade Dream。</p>
</div>
</body>
</html>Der Effekt ist wie folgt:
Wird der Rahmen nach dem Hinzufügen eines Schatteneffekts dreidimensionaler und schöner (die Farbe)? ist vielleicht nicht schön), aber Sie können eine besser aussehende Kombination wählen... ^@^)
Erklärung: Wir sehen, dass im obigen Code vier Attributwerte hinter box-shadow stehen. Was bedeuten sie?
Werfen wir einen Blick auf die Bedeutung des Box-Shadow-Attributwerts. (Empfohlen: Beispiel für eine CSS-Rahmeneigenschaft)
box-shadow fügt der Box einen oder mehrere Schatten hinzu.
Dieses Attribut ist eine durch Kommas getrennte Liste von Schatten. Jeder Schatten wird durch 2–4 Längenwerte, optionale Farbwerte und das optionale Schlüsselwort „inset“ angegeben. Der Wert für die ausgelassene Länge ist 0.
| 值 |
含义 |
| h-shadow |
必需。水平阴影的位置。允许负值。 |
| v-shadow |
必需。垂直阴影的位置。允许负值。 |
| blur |
可选。模糊距离。 |
| spread |
可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。 |
| inset |
可选。将外部阴影 (outset) 改为内部阴影。 |
Nachdem wir uns die Bedeutung jedes Attributwerts angesehen haben, können wir den im obigen Beispiel festgelegten Schatteneffekt kennen. Die vier Attributwerte nach dem Box-Shadow-Attribut sind: h-shadow , V-Schatten, Unschärfe, Farbe.
Es gibt viele schöne Effekte, die mit CSS erzielt werden können. Wenn Sie mehr über CSS-Schatteneffekte erfahren möchten, können Sie sich das CSS3-Referenzhandbuch für die neueste Version auf der chinesischen PHP-Website ansehen 🎜>
CSS3-Referenzhandbuch für die neueste VersionVerwandte Empfehlungen:CSS3-Eingabefeld-Schatteneffekt und andere Schatteneffekte_html/css_WEB-ITnose
CSS erfordert Schatteneffekt_html/css_WEB-ITnose
CSS implementiert Schattentexteffekt_CSS/HTML
Das obige ist der detaillierte Inhalt vonCSS-Schatteneffekt: Wie stellt man den CSS-Randschatten ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!