Les attributs d'ombre implémentés dans CSS3 sont : 1. l'attribut text-shadow, qui peut obtenir un effet d'ombre de texte ; 2. l'attribut box-shadow, qui peut obtenir un effet d'ombre de bordure ; 3. l'attribut de filtre, qui doit être utilisé avec ; la fonction drop-shadow() Vous pouvez définir un effet d'ombre sur l'image.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
css3 implémente les attributs d'ombre
1. attribut text-shadow --- implémente l'effet d'ombre de texte
l'attribut text-shadow est utilisé pour définir le texte ombré, vous pouvez définir la longueur, la largeur et le flou des pixels ; distances et couleurs des ombres.
<!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>
2. attribut box-shadow - pour obtenir un effet d'ombre de bordure
l'attribut box-shadow peut également appliquer une ombre à la zone de texte et définir la longueur en pixels, la largeur et la distance de flou de l'ombre. comme couleur de l'ombre.
box-shadow peut ajouter des ombres aux éléments, prenant en charge l'ajout d'un ou plusieurs.
box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式;
Paramètres :
Remarque : l'encart peut être écrit dans le premier ou le dernier paramètre, les autres positions ne sont pas valides.
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.
Code CSS :
#box{
width:50px;
height:50px;
background:#fff;
box-shadow:4px 4px 15px #666;
}Effet :
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 la valeur est Lorsque la valeur est négative, elle est réduite.
code CSS :
#box{
width:50px;
height:50px;
background:#fff;
box-shadow:4px 4px 15px -3px #666;
}Effet :
Les valeurs de décalage de l'axe X et de l'axe Y peuvent être définies sur des nombres négatifs
Le décalage de l'axe X est négatif :
#box{
width:50px;
height:50px;
background:#fff;
box-shadow:-5px 5px 5px #666;
}Effet :
Le décalage de l'axe Y est négatif :
#box{
width:50px;
height:50px;
background:#fff;
box-shadow:5px -5px 5px #666;
}Effet :
Ombre extérieure :
#box{
width:50px;
height:50px;
background:green;
box-shadow:5px 4px 10px #666;
}Effet :
Ombre intérieure :
#box{
width:50px;
height:50px;
background:#fff;
box-shadow:5px 4px 10px #666 inset;
}Effet :
Ajouter plusieurs ombres :
#box{
width:50px;
height:50px;
background:#fff;
box-shadow:5px 4px 10px #666 inset,
3px 3px 5px pink,
6px 4px 2px green;
}Effet :
3. attribut de filtre
L'attribut de filtre définit l'effet visuel de l'élément (généralement ), lorsqu'il est combiné avec l'ombre portée(). fonction Utilisés ensemble pour définir un effet d’ombre sur une image.
filter:drop-shadow(h-shadow v-shadow blur spread color);
Une ombre est une version offset d'un masque qui est composé sous l'image, peut être flou et peut être peint dans une couleur spécifique. La fonction accepte les valeurs de type
h-shadow v-shadow (obligatoire)
Ce sont les deux valeurs
Si les deux valeurs sont 0, l'ombre apparaît directement derrière l'élément (si
C'est la troisième valeur de code>
查看
<!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>
（学习视频分享：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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
