Comment définir l'ombre de l'image en CSS-tutoriel CSS-php.cn

Comment définir l'ombre de l'image en CSS

青灯夜游

Libérer： 2021-11-11 16:14:26

original

18753 Les gens l'ont consulté

Méthode de configuration : 1. Utilisez l'instruction "box-shadow: horizontal shadow vertical shadow blur spread color inset ;" 2. Utilisez l'instruction "filter:drop-shadow (horizontal shadow vertical shadow blur spread color)".

Comment définir l'ombre de l'image en CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Il existe deux façons de définir l'ombre de l'image en CSS :

attribut box-shadow
filter:drop-shadow()

Ce qui suit vous présentera

1. Attribut box-shadow La propriété

box-shadow ajoute une ou plusieurs ombres à la boîte.

Syntaxe : box-shadow : h-shadow v-shadow flou propagation couleur encart ;
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="Comment définir l'ombre de l'image en CSS" >
	</body>
</html>

Copier après la connexion

Comment définir lombre de limage en CSS

2、使用filter:drop-shadow()

filter 属性定义了元素(通常是 Comment définir l'ombre de l'image en CSS )的可视效果(例如：模糊与饱和度)。

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

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

h-shadow Obligatoire. La position de l'ombre horizontale. Les valeurs négatives sont autorisées.

Comment définir lombre de limage en CSS

v-shadow Obligatoire. La position de l'ombre verticale. Les valeurs négatives sont autorisées.

🎜flou facultatif. Distance floue. 🎜🎜🎜🎜à tartiner Facultatif. La taille de l'ombre. 🎜🎜🎜🎜couleur en option. La couleur de l'ombre. Voir les valeurs de couleur CSS. 🎜🎜🎜🎜encart facultatif. Remplacez l'ombre extérieure (début) par l'ombre intérieure. 🎜🎜🎜🎜Exemple : 🎜

<!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="Comment définir l'ombre de l'image en CSS" >
	</body>
</html>

Copier après la connexion

🎜

🎜🎜🎜2. Utilisez filter:drop-shadow()🎜🎜🎜L'attribut filter définit l'effet visuel (tel que le flou et la saturation) de l'élément (généralement Comment définir l'ombre de l'image en CSS

Comment définir l'ombre de l'image en CSS

). 🎜🎜drop-shadow() peut définir un effet d'ombre sur l'image. Les ombres sont composées sous l'image et peuvent avoir des versions floues et décalées du cache qui peuvent être peintes dans une couleur spécifique. 🎜🎜Syntaxe : filter:drop-shadow (h-shadow v-shadow blur spread color);🎜🎜Exemple : 🎜rrreee🎜🎜🎜🎜 (Partage vidéo d'apprentissage : 🎜tutoriel vidéo CSS🎜)🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!