Quel est l'attribut de définition de l'ombre pour la boîte en CSS3-Questions et réponses frontales-php.cn

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

青灯夜游

Libérer： 2022-05-18 13:04:55

original

5600 Les gens l'ont consulté

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.

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

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轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;

Copier après la connexion

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>

Copier après la connexion

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