Maison > Article > interface Web > Quel est l'attribut de définition de l'ombre pour la boîte en CSS3

Quel est l'attribut de définition de l'ombre pour la boîte en CSS3

青灯夜游original: 2022-05-18 13:04:015739parcourir

L'attribut CSS3 pour définir les ombres sur les boîtes est "box-shadow". Cet attribut est utilisé pour obtenir l'effet d'ombre de bordure et appliquer l'ombre à l'élément boîte. La syntaxe est "box-shadow : Ombre horizontale Ombre verticale Rayon d'expansion Couleur de l'ombre Mode de projection" si le mode de projection est défini sur "en médaillon". ", l'ombre intérieure peut être obtenue.

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

L'attribut css3 pour définir l'ombre de la boîte est "box-shadow".

propriété box-shadow - pour obtenir un effet d'ombre de bordure

la propriété box-shadow peut appliquer une ombre à la zone de texte et définir la longueur en pixels, la largeur et la distance de flou de l'ombre ainsi que la couleur de l'ombre.

box-shadow peut ajouter des ombres aux éléments de la boîte, prenant en charge l'ajout d'un ou plusieurs.

box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;

Remarque : La propriété boxShadow ajoute une ou plusieurs ombres portées à 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.

Quel est l'attribut de définition de l'ombre pour la boîte en CSS3

Remarque : l'encart peut être écrit dans le premier ou le dernier paramètre, les autres positions ne sont pas valides.

Valeurs de décalage de l'axe X et de l'axe Y (ombre horizontale et ombre verticale)

Les valeurs de décalage de l'axe X et de l'axe Y peuvent être définies sur des nombres négatifs
Rayon du flou de l'ombre :

Ce paramètre est facultatif. La valeur ne peut être que positive. Si la valeur est 0, cela signifie que l'ombre n'a pas d'effet de flou. Plus la valeur est grande, plus le bord de l'ombre est flou.
Rayon d'expansion de l'ombre :

Ce paramètre est facultatif. La valeur peut être positive ou négative. Si la valeur est positive, toute l'ombre sera agrandie. Sinon, si la valeur est négative, elle sera réduite. .

Exemple

<html>
	<head>
		<meta charset="utf-8">
		<style>
			div{
				width: 300px;
				height: 100px;
				background:#fff;
				border: 1px solid  #FFC0CB;
				margin: 50px;
			}
			.box1 {
				
				box-shadow: 10px 10px 5px #888888;
			}
			.box2 {
				/* X轴偏移量为负数 */
				box-shadow:-10px 10px 5px #666;
			}
			.box3 {
				/* Y轴偏移量为负数 */
				box-shadow: 10px -10px 5px #888888;
			}
			.box4 {
				/* inset将外阴影改内阴影 */
				box-shadow: 10px 10px 10px #888888 inset;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
	</body>
</html>

Quel est lattribut de définition de lombre pour la boîte en CSS3

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS, front-end web)

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：Il existe plusieurs types de requêtes asynchrones jqueryArticle suivant：Il existe plusieurs types de requêtes asynchrones jquery

Articles Liés

Voir plus