Heim >Web-Frontend >CSS-Tutorial >So legen Sie den Bildschatten in CSS fest
So legen Sie den Bildschatten in CSS fest
- 青灯夜游Original
- 2021-11-10 16:41:3218792Durchsuche
Einstellungsmethode: 1. Verwenden Sie die Anweisung „box-shadow: horizontaler Schatten, vertikaler Schatten, Unschärfe, Farbeinschub;“ 2. Verwenden Sie die Anweisung „filter:drop-shadow (horizontaler Schatten, vertikale Schatten, Unschärfefarbe)“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Es gibt zwei Möglichkeiten, Bildschatten in CSS festzulegen:
Box-Shadow-Attribut
filter:drop-shadow()
Das Folgende wird Ihnen vorgestellt
1. Verwenden Sie das Feld -shadow-Attribut Die
box-shadow-Eigenschaft fügt der Box einen oder mehrere Schatten hinzu.
Syntax: box-shadow: H-Shadow V-Shadow Blur Spread Color Inset;box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
img {
box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
/*考虑浏览器兼容性*/
-moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
}
</style>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%" / alt="So legen Sie den Bildschatten in CSS fest" >
</body>
</html>2、使用filter:drop-shadow()
filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。
drop-shadow()可给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。
语法：filter:drop-shadow(h-shadow v-shadow blur spread color);
v-shadow Erforderlich. Die Position des vertikalen Schattens. Negative Werte sind erlaubt.
🎜unschärfe Optional. Unscharfe Distanz. 🎜🎜🎜🎜Spread Optional. Die Größe des Schattens. 🎜🎜🎜🎜Farbe optional. Die Farbe des Schattens. Siehe CSS-Farbwerte. 🎜🎜🎜🎜Einsatz optional. Verwandeln Sie den äußeren Schatten (Anfang) in einen inneren Schatten. 🎜🎜🎜🎜Beispiel: 🎜<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
img {
-webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .5));
/*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .5));
}
</style>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%" / alt="So legen Sie den Bildschatten in CSS fest" >
</body>
</html>🎜
🎜🎜🎜2. Filter verwenden:drop-shadow()🎜🎜🎜Das Filterattribut definiert den visuellen Effekt (z. B. Unschärfe und Sättigung) des Elements (normalerweise filter:drop-shadow(H-Shadow V-Shadow Blur Spread Color);🎜🎜Beispiel: 🎜rrreee🎜🎜🎜🎜 (Teilen von Lernvideos: 🎜CSS-Video-Tutorial🎜)🎜Das obige ist der detaillierte Inhalt vonSo legen Sie den Bildschatten in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!