Comment écrire une ombre CSS-tutoriel CSS-php.cn

Comment écrire une ombre CSS

青灯夜游

Libérer： 2023-01-07 11:43:40

original

9286 Les gens l'ont consulté

Comment écrire l'ombre : 1. Ombre de texte « text-shadow : h-shadow v-shadow Blur Color ; » ; 2. Border Shadow « box-shadow : h-shadow v-shadow Blur Spread Color Inset ; ».

Comment écrire une ombre CSS

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

1. Comment écrire une ombre de texte CSS

En CSS, vous pouvez utiliser l'attribut text-shadow pour implémenter le texte ombré. L'attribut text-shadow est appliqué au texte ombré.

Syntaxe

text-shadow: h-shadow v-shadow blur color;

Copier après la connexion

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

Remarque : La propriété text-shadow connecte un ou plusieurs texte fantôme. La propriété est une ombre, spécifiant toutes les 2 ou 3 valeurs de longueur et une valeur de couleur facultative séparées par des virgules. La longueur expirée est 0.

Exemple :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css设置文本阴影效果</title> 
        <style> 
            h1 { 
                color: red; 
                text-shadow: 3px 5px 5px #656B79; 
            }
        </style> 
    </head> 
    <body> 
        <h1>文本阴影！</h1>
    </body> 
</html>

Copier après la connexion

Rendu :

Comment écrire une ombre CSS

2. Comment écrire une ombre de bordure CSS

En CSS, vous pouvez utiliser l'attribut box-shadow pour obtenir l'effet d'ombre de bordure. L'attribut peut définir une ou plusieurs zones avec des ombres portées.

Syntaxe

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

Copier après la connexion

值	说明
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.

Exemple :

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				width: 300px;
				height: 100px;
				background-color: #ff9900;
				-moz-box-shadow: 10px 10px 5px #888888;
				/* 老的 Firefox */
				box-shadow: 10px 10px 5px #888888;
			}
		</style>
	</head>
	<body>

		<div>边框阴影</div>

	</body>
</html>

Copier après la connexion

Rendu :

Comment écrire une ombre CSS