Maison >interface Web >tutoriel CSS >Comment définir l'effet d'ombre de bordure en CSS
Comment définir l'effet d'ombre de bordure en CSS
- 青灯夜游original
- 2021-05-19 13:54:0213508parcourir
En CSS, vous pouvez utiliser l'attribut box-shadow pour ajouter une ou plusieurs ombres à la bordure et définir l'effet d'ombre de la bordure. Le format de syntaxe est "box-shadow : ombre horizontale, ombre verticale, rayon de flou, rayon étendu. shadow color inset " ; La valeur d'encart est utilisée pour changer l'ombre extérieure en ombre intérieure et peut être omise.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
En CSS, vous pouvez utiliser l'attribut box-shadow pour obtenir des effets d'ombre de bordure. Cette propriété définit la longueur en pixels, la largeur et la distance de flou de l'ombre ainsi que la couleur de l'ombre.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Rendu :
Description :
Le La propriété box-shadow ajoute une ou plusieurs ombres à 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 le mot clé inset facultatif. La valeur de la longueur omise est 0.
Syntaxe :
box-shadow: h-shadow v-shadow blur spread color inset;
Valeur de l'attribut :
h-shadow : fait référence au décalage horizontal de l'ombre, sa valeur peut être positive ou négative, positive Valeur, l'ombre est du côté droit de l'objet, valeur négative, l'ombre est du côté gauche de l'objet
v-shadow : fait référence au décalage vertical de l'ombre , et sa valeur peut aussi être positive ou négative. , valeur positive, l'ombre est en bas de l'objet, valeur négative, l'ombre est en haut de l'objet
flou. : rayon de flou de l'ombre ; ce paramètre est facultatif et ne peut être positif que si Lorsque sa 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
. spread : rayon d'expansion de l'ombre ; ce paramètre est facultatif et sa valeur peut être positive. Valeur négative, valeur positive, toute l'ombre sera étendue et agrandie, sinon, elle sera réduite
. color : couleur de l'ombre ; ce paramètre est facultatif. Lorsqu'aucune couleur n'est définie, le navigateur prendra la couleur par défaut, mais la couleur par défaut de chaque navigateur est différente, en particulier les navigateurs Safari et Chrome sous le noyau webkit. incolore, c'est-à-dire transparent. Il est recommandé de ne pas omettre ce paramètre
inset : Définit l'ombre intérieure pour changer l'ombre de l'ombre extérieure (au début) ; peut être omis.
Remarque : **Plusieurs couches d'ombres, la couche la plus interne a la priorité la plus élevée, puis diminue en séquence.
(Partage vidéo 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!