Comment annuler l'ombre de la bordure CSS3

WBOY
Libérer: 2022-06-14 15:27:14
original
3296 Les gens l'ont consulté

En CSS3, vous pouvez utiliser l'attribut "box-shadow" pour annuler l'ombre sur la bordure. Cet attribut est utilisé pour définir une ou plusieurs zones d'ombre déroulantes. Définissez simplement la valeur de cet attribut sur "aucun". annulez l'élément. L'ombre de la bordure, la syntaxe est "element {box-shadow: none;}".

Comment annuler l'ombre de la bordure CSS3

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

Comment annuler l'ombre de la bordure CSS3

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

box-shadow: h-shadow v-shadow blur spread color inset;
Copier après la connexion

Remarque : La propriété boxShadow ajoute une ou plusieurs ombres portées à 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.

  • h-shadow requis. La position de l'ombre horizontale. Valeurs négatives autorisées

  • v-shadow Obligatoire. La position de l'ombre verticale. Valeurs négatives autorisées

  • flou Facultatif. Distance de flou

  • étalement en option. La taille de l'ombre

  • couleur est facultative. La couleur de l'ombre.

  • encart facultatif. Changez l'ombre de l'ombre extérieure (au début) à l'ombre intérieure

L'exemple est le suivant :

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

Résultat de sortie :

Comment annuler lombre de la bordure CSS3

Après avoir défini aucun, le résultat de sortie :

<style> 
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow:none;
}
</style>
</head>
<body>
<div></div>
</body>
Copier après la connexion

Comment annuler lombre de la bordure CSS3

(Partage vidéo d'apprentissage : tutoriel vidéo CSS, tutoriel vidéo HTML)

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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!