Maison >interface Web >tutoriel CSS >Comment utiliser la propriété CSS3 border-image-outset ?
Comment utiliser la propriété CSS3 border-image-outset ?
- 青灯夜游original
- 2019-02-12 13:49:433402parcourir
L'attribut border-image-outset est utilisé pour spécifier la quantité de zone d'image de bordure dessinée à l'extérieur de la bordure, c'est-à-dire la quantité par laquelle l'image de bordure dépasse la zone de bordure.
Propriété CSS3 border-image-outset
Fonction : Spécifie le frontière La quantité par laquelle l'image dépasse le cadre de délimitation.
Syntaxe :
border-image-outset: length|number;
longueur : Indique le réglage de la distance entre l'image de bordure (border-image) et la bordure, la valeur par défaut est 0.
numéro : représente un multiple de la largeur de la bordure correspondante.
Explication :
1. L'attribut border-image-outset spécifie la quantité de l'image de bordure au-delà de la zone de bordure, y compris le haut, le bas, la gauche et la droite. parties. Si la quatrième valeur est omise, elle est identique à la deuxième valeur. Si la troisième valeur est omise, elle est identique à la première valeur. Si la deuxième valeur est omise, elle est identique à la première valeur.
2. L'attribut border-image-outset n'autorise aucune valeur négative.
Exemple d'utilisation de la propriété CSS3 border-image-outset
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.box{
width: 600px;
margin: 100px auto;
border: 1px solid red;
}
p{
border:15px solid;
padding: 30px;
border-image:url(Comment utiliser la propriété CSS3 border-image-outset ?) 100 round;
border-image-outset: 1px 10px 8px;
}
</style>
</head>
<body>
<div class="box">
<p>PHP中文网</p>
</div>
</body>
</html>Rendu :
Sans ajouter l'attribut border-image-outset :
Après avoir ajouté l'attribut border-image-outset :
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!