Comment ajouter une ombre en CSS

藏色散人
Libérer: 2023-01-05 16:09:43
original
3003 Les gens l'ont consulté

En CSS, vous pouvez définir une ou plusieurs zones d'ombre déroulantes via l'attribut "box-shadow". La syntaxe est telle que "box-shadow : h-shadow v-shadow blur spread color inset ; ". L'attribut est une liste de nuances séparées par des virgules.

Comment ajouter une ombre en CSS

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

L'attribut box-shadow peut définir une ou plusieurs zones d'ombre déroulantes.

默认值:none
继承:no
版本:CSS3
JavaScript 语法:object.style.boxShadow="10px 10px 5px #888888"
Copier après la connexion

Syntaxe

box-shadow: h-shadow v-shadow blur spread color inset;
Copier après la connexion

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可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset可选。从外层的阴影(开始时)改变阴影内侧阴影
Copier après la connexion

[Apprentissage recommandé : Tutoriel vidéo CSS]

Exemple de code :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>
Copier après la connexion

Effet :

Comment ajouter une ombre en 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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal