Maison > Article > interface Web > Comment obtenir un effet d'ombre en CSS
Comment obtenir un effet d'ombre en CSS
- 青灯夜游original
- 2021-04-13 18:37:2323482parcourir
Méthode : 1. Utilisez l'attribut text-shadow, la syntaxe « text-shadow : ombre horizontale ombre verticale flou distance couleur ; » 2. Utilisez l'attribut box-shadow, la syntaxe « box-shadow : ombre horizontale ombre verticale flou distance taille de l'ombre couleur encart ;".
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Méthode 1 : Utiliser l'attribut text-shadow
text-shadow L'attribut est utilisé pour définir le texte avec une ombre, vous pouvez définir la longueur, la largeur et la distance de flou en pixels ; de l'ombre et de la couleur de l'ombre.
Syntaxe :
text-shadow: h-shadow v-shadow blur color;
Valeur de l'attribut :
h-shadow : Définit la position de l'ombre horizontale, les valeurs négatives sont autorisées.
v-shadow : Définit la position de l'ombre verticale, les valeurs négatives sont autorisées.
flou : définissez la distance de flou.
couleur : Définissez la couleur de l'ombre.
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>
Méthode 2 : Utiliser l'attribut box-shadow
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.
Syntaxe :
box-shadow: h-shadow v-shadow blur spread color inset;
Valeur de l'attribut :
h-shadow : Définissez la position de l'ombre horizontale, les valeurs négatives sont autorisé ; valeur requise, ne peut pas être omis.
v-shadow : Définissez la position de l'ombre verticale, les valeurs négatives sont autorisées, la valeur requise ne peut pas être omise.
flou : définissez la distance de flou ; valeur facultative, peut être omise.
spread : Définissez la taille de l'ombre ; valeur facultative, peut être omise.
color : Définit la couleur de l'ombre ; valeur facultative, peut être omise.
inset : définit l'ombre intérieure pour changer l'ombre de l'ombre extérieure (au début, la valeur facultative peut être omise) ;
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css设置阴影效果</title>
<style>
.demo{
width: 400px;
height: 300px;
margin: 50px auto;
}
.demo img{
box-shadow: 10px 10px 10px rgba(0,0,0,.5);
/*考虑浏览器兼容性*/
-moz-box-shadow: 10px 10px 10px rgba(0,0,0,.5);
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div class="demo">
<img src="img/1.jpg"/ alt="Comment obtenir un effet d'ombre en CSS" >
</div>
</body>
</html>
(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!