Explication détaillée de l'utilisation de l'attribut box-shadow de CSS3 :
Tout d'abord, comprenons-le à partir du nom. Box-shadow peut être décomposé en deux parties :
(1).box : représente une boîte, c'est ce que nous appelons une boîte d'éléments, tels que des divs, etc.
(2).shadow : Le sens de la projection.
Ensuite, cet attribut est utilisé pour définir l'effet d'ombre de l'élément.
Ce chapitre présente l'utilisation de l'attribut box-shadow à travers des exemples de code.
La structure syntaxique est la suivante :
box-shadow:h-shadow v-shadow blur spread color inset;
Explication du paramètre :
1.h-shadow : Obligatoire, définit le décalage horizontal de l'ombre de l'élément, qui peut être une valeur négative, et l'unité est le pixel.
2.v-shadow : obligatoire, définit le décalage vertical de l'ombre de l'élément, qui peut être une valeur négative, et l'unité est le pixel.
3.blur : Facultatif, rayon de flou d'ombre, qui ne peut être que positif. S'il est égal à 0, cela signifie qu'il n'y a pas d'effet de flou, pixel unité.
4.spread : Facultatif, la taille du rayon étendu de l'ombre, qui peut être une valeur négative, et l'unité est le pixel.
5.color : Facultatif. Si ce paramètre est omis, le navigateur sélectionnera la couleur par défaut. La couleur par défaut de chaque navigateur sera différente. Certains sont transparents, ce qui définit la couleur de l'ombre.
6.inset : Facultatif, vous pouvez changer l'ombre extérieure en ombre intérieure.
Exemple de code :
Exemple 1 :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Le code ci-dessus définit uniquement le décalage horizontal et vertical de l'ombre, et n'a pas d'effet de flou. définissez la couleur de l'ombre, puis parcourez. Le navigateur sélectionnera la couleur par défaut, qui varie selon les navigateurs. Certains sont noirs et d'autres transparents. Il n'est pas recommandé d'utiliser cet attribut par défaut.
Exemple 2 :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Le code ci-dessus définit le décalage de l'ombre et la couleur de l'ombre du div.
Exemple 3
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px 10px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Le code ci-dessus définit le décalage horizontal et vertical, le rayon de flou et la couleur de l'ombre div.
Exemple 4 :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:50px 50px 10px 10px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Le code ci-dessus définit le décalage horizontal et vertical, le rayon de flou, le rayon d'expansion de l'ombre et la couleur de l'ombre div.
Exemple 5 :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:30px 10px 10px 10px red inset;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Le code ci-dessus peut définir l'ombre intérieure du div et définir d'autres paramètres.
Exemple 6 :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
box-shadow:30px 10px 10px 10px red,10px 20px 15px 10px blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
section suivante