Maison > Article > interface Web > CSS3 a-t-il un effet d'ombre ?

CSS3 a-t-il un effet d'ombre ?

WBOYoriginal: 2022-04-22 18:22:121482parcourir

Il existe des effets d'ombre en CSS3 ; ce sont : 1. Effet d'ombre de texte, utilisez l'attribut "text-shadow", la syntaxe est "text-shadow : horizontal et vertical..." ; Attribut "box-shadow", la syntaxe est "box-shadow : horizontal et vertical...".

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

Le CSS3 a-t-il un effet d'ombre ?

1. L'attribut "text-shadow" représente l'ombre du texte

La syntaxe est

text-shadow:水平阴影 垂直阴影 模糊程度 颜色

L'attribut text-shadow connecte un ou plusieurs textes 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.

L'exemple est le suivant :

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
h1 {text-shadow:2px 2px #FF0000;}
</style>
</head>
<body>
<h1>Text-shadow effect</h1>
<p><b>注意:</b>IE 9及更早版本的浏览器不支持 text-shadow 属性.</p>
</body>
</html>

Résultat de sortie :
CSS3 a-t-il un effet dombre ?

2. "box-shadow" représente l'ombre de la boîte

La syntaxe est

box-shadow:水平阴影 垂直阴影 模糊距离 大小

L'attribut 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.

L'exemple est le suivant :

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Résultat de sortie :

CSS3 a-t-il un effet dombre ?

(Partage de vidéos d'apprentissage : Tutoriel vidéo 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 css css3

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：Comment vider le tableau sauf les deux premières lignes dans jqueryArticle suivant：Comment vider le tableau sauf les deux premières lignes dans jquery

Articles Liés

Voir plus