CSS-Schatteneffekt: Wie stellt man den CSS-Randschatten ein?-CSS-Tutorial-php.cn

CSS-Schatteneffekt: Wie stellt man den CSS-Randschatten ein?

不言

Freigeben： 2018-09-05 17:20:06

Original

10507 Leute haben es durchsucht

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>

Nach dem Login kopieren

Der Effekt ist wie folgt:

CSS-Schatteneffekt: Wie stellt man den CSS-Randschatten ein?

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 Version

Verwandte 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!