So legen Sie den Bildschatten in CSS fest-CSS-Tutorial-php.cn

So legen Sie den Bildschatten in CSS fest

青灯夜游

Freigeben： 2021-11-11 16:14:26

Original

18794 Leute haben es durchsucht

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)“.

So legen Sie den Bildschatten in CSS fest

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>

Nach dem Login kopieren

So legen Sie den Bildschatten in CSS fest

2、使用filter:drop-shadow()

filter 属性定义了元素(通常是 So legen Sie den Bildschatten in CSS fest )的可视效果(例如：模糊与饱和度)。

drop-shadow()可给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。

语法：filter:drop-shadow(h-shadow v-shadow blur spread color);

h-shadow Erforderlich. Die Position des horizontalen Schattens. Negative Werte sind erlaubt.

So legen Sie den Bildschatten in CSS fest

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>

Nach dem Login kopieren

🎜

🎜🎜🎜2. Filter verwenden:drop-shadow()🎜🎜🎜Das Filterattribut definiert den visuellen Effekt (z. B. Unschärfe und Sättigung) des Elements (normalerweise So legen Sie den Bildschatten in CSS fest

). 🎜🎜drop-shadow() kann einen Schatteneffekt auf dem Bild setzen. Schatten werden unter dem Bild zusammengesetzt und können unscharfe, versetzte Versionen der Matte aufweisen, die in einer bestimmten Farbe gemalt werden können. 🎜🎜Syntax: 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!