Maison > interface Web > Questions et réponses frontales > Comment définir l'ombre de la bordure CSS

Comment définir l'ombre de la bordure CSS

藏色散人
Libérer: 2023-01-05 16:07:17
original
2706 Les gens l'ont consulté

En CSS, vous pouvez définir une ou plusieurs zones d'ombre déroulantes via l'attribut box-shadow. La syntaxe d'utilisation de cet attribut est telle que "box-shadow:Xpx Ypx Zpx #888888;", où X représente l'ombre horizontale, Y représente l'ombre verticale, Z représente l'effet de dégradé et "#888888" représente la couleur de l'ombre.

Comment définir l'ombre de la bordure CSS

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

CSS définit l'effet d'ombre de bordure

La propriété box-shadow peut définir une ou plusieurs zones d'ombre déroulantes.

box-shadow: Xpx Ypx Zpx #888888;
Copier après la connexion

X : Ombre horizontale (valeur de décalage)

Y : Ombre verticale (valeur de décalage)

Z : Effet dégradé

#888888 : Couleur de l'ombre

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 12px 12px 500px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Copier après la connexion

[Apprentissage recommandé : 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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal