Maison > Article > interface Web > Quel est le code du style d'ombre en HTML

Quel est le code du style d'ombre en HTML

青灯夜游original: 2022-09-23 16:32:135050parcourir

Code de style : 1. Style d'ombre de texte "text-shadow : h-shadow v-shadow Blur Color ;" 2. Style d'ombre de bordure "Box-Shadow : h-shadow V-Shadow Blur Spread Color Inset ;" 3 , style d'ombre d'image "filtre: ombre portée (couleur de propagation du flou h-ombre v-ombre);".

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

En HTML, il existe trois façons d'ajouter des styles d'ombre aux éléments :

Ombre de texte : utilisez l'attribut text-shadow
Ombre de bordure : utilisez l'attribut box-shadow
Ombre d'image : utilisez l'attribut filter (doit être utilisé avec la fonction drop-shadow())

1. Style d'ombre de texte

En HTML, vous pouvez utiliser l'attribut text-shadow pour obtenir du texte ombré. L'attribut text-shadow est appliqué au texte ombré.

Syntaxe

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

Valeur	Description
h-shadow	Obligatoire. La position de l'ombre horizontale. Les valeurs négatives sont autorisées.
v-shadow	Obligatoire. La position de l'ombre verticale. Les valeurs négatives sont autorisées.
flou	facultatif. Distance floue.
couleur	facultatif. La couleur de l'ombre.

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

Exemple :

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

Rendu :

Quel est le code du style dombre en HTML

2. Style d'ombre de bordure

En HTML, vous pouvez utiliser l'attribut box-shadow pour implémenter une bordure avec un style d'ombre. 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;

Valeur	Description
h-shadow	Obligatoire. La position de l'ombre horizontale. Valeurs négatives autorisées
v-shadow	Obligatoire. La position de l'ombre verticale. Valeurs négatives autorisées
flou	Facultatif. Distance de flou
étalement	en option. La taille de l'ombre
color	est facultative. La couleur de l'ombre.
encart	facultatif. Changer l'ombre en ombre intérieure à partir de l'ombre extérieure (au début)

注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

示例：

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

		<div>边框阴影</div>

	</body>
</html>

效果图：

Quel est le code du style dombre en HTML

3、图片阴影样式

在html中，可使用filter属性来实现带阴影样式的边框。

filter 属性定义了元素(通常是 Quel est le code du style d'ombre en HTML )的可视效果，当和drop-shadow()函数一起使用，可给图像设置一个阴影效果。

filter:drop-shadow(h-shadow v-shadow blur spread color);

阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。函数接受(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。参数如下：

h-shadow v-shadow (必须)
这是设置阴影偏移量的两个值. 设定水平方向距离. 负值会使阴影出现在元素左边. 设定垂直距离.负值会使阴影出现在元素上方。查看可能的单位.
如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 and/or ，会有模糊效果).
(可选)
这是第三个code>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值若未设定，默认是0 (则阴影的边界很锐利).
(可选)
这是第四个值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小).
注意: Webkit, 以及一些其他浏览器不支持第四个长度，如果加了也不会渲染。
(可选)
查看该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中，会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。

<!DOCTYPE html>
<html>
<head>
<style>
img {
    -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
    filter: drop-shadow(8px 8px 10px red);
}
</style>
</head>
<body>

<p>给图像设置一个阴影效果:</p>

<img src="pineapple.jpg" alt="Pineapple" width="300"    style="max-width:90%">

</body>
</html>

Quel est le code du style dombre en HTML

（学习视频分享：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!

html5 firefox css css3 html webkit Filter Length

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：Quels sont les caractères de commentaire HTML sur une seule ligne ?Article suivant：Quels sont les caractères de commentaire HTML sur une seule ligne ?

Articles Liés

Voir plus