Maison  >  Article  >  interface Web  >  Comment définir l'ombre de l'image en CSS

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

青灯夜游
青灯夜游original
2021-11-10 16:41:3218738parcourir

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>

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>
🎜1. png🎜🎜🎜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). 🎜🎜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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn