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

Comment définir l'ombre div en CSS

青灯夜游original: 2021-05-12 13:47:0428668parcourir

En CSS, vous pouvez utiliser l'attribut box-shadow pour définir l'ombre div. Il vous suffit d'ajouter le "box-shadow : valeur de l'ombre horizontale valeur de l'ombre verticale distance de flou taille de l'ombre style d'encart ;" à l'élément div Oui ; la valeur "encart" peut être omise, elle définit l'ombre intérieure.

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

css set div shadow

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Rendu :

Comment définir lombre div en CSS

Description :

La propriété box-shadow peut définir une ou plusieurs zones d'ombre déroulantes.

Syntaxe

box-shadow: h-shadow v-shadow blur spread color inset;

Remarque : La propriété boxShadow ajoute une ou plusieurs ombres déroulantes à la boîte. Cette propriété est une liste d'ombres séparées par des virgules, chacune spécifiée par 2 à 4 valeurs de longueur, une valeur de couleur facultative et un mot-clé d'encart facultatif. La valeur de la longueur omise est 0.

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

Partage de vidéos 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

Article précédent：Comment améliorer les performances CSSArticle suivant：Comment améliorer les performances CSS

Articles Liés

Voir plus