Maison > Article > interface Web > Comment définir l'ombre de l'image en CSS
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)".
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>
2、使用filter:drop-shadow()
filter 属性定义了元素(通常是)的可视效果(例如:模糊与饱和度)。
drop-shadow()可给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。
语法:filter:drop-shadow(h-shadow v-shadow blur spread color);
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>🎜🎜🎜🎜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 ). 🎜🎜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!