Maison > Article > interface Web > Comment ajouter une bordure intérieure en CSS3
Comment ajouter une bordure intérieure en CSS3
- 王林original
- 2020-11-19 11:52:562558parcourir
Comment ajouter des bordures intérieures en CSS3 : Vous pouvez ajouter des bordures intérieures en utilisant l'attribut border et l'attribut box-sizing, tels que [box-sizing:border-box;]. L'attribut box-sizing permet de définir certaines propriétés de manière à s'adapter à une zone spécifiée.
L'environnement d'exploitation de ce tutoriel : Système Windows 7, version CSS3, cette méthode convient à toutes les marques d'ordinateurs.
css3 ajoute une bordure intérieure
Attributs associés :
L'attribut border vous permet de spécifier le style et la couleur de la bordure d'un élément.
L'attribut box-sizing vous permet de définir certains éléments de manière à les adapter à une zone spécifiée.
(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)
Syntaxe :
box-sizing: content-box|border-box|inherit:
Valeur d'attribut :
content-box C'est le comportement de la largeur et de la hauteur spécifié par CSS2.1. La spécification de la largeur et de la hauteur de l'élément (propriétés min/max) s'applique à la largeur et à la hauteur de la boîte. Le remplissage et la disposition de la bordure de l'élément ainsi que le dessin spécifient la largeur et la hauteur sauf
border-box Spécifiez la largeur et la hauteur (attributs min/max) pour déterminer la bordure de l'élément. Autrement dit, spécifier la largeur et la hauteur d'un élément inclut le remplissage et la bordure. La largeur et la hauteur du contenu sont obtenues en soustrayant respectivement la bordure et le remplissage de la largeur et de la hauteur définies.
inherit Spécifie la valeur de l'attribut box-sizing, qui doit être hérité de l'élément parent
Implémentation du code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这个 div 占据了左边的一半。</div>
<div class="box">这个 div 占据了右边的一半。</div>
</div>
</body>
</html> pour obtenir l'effet :
Recommandations associées : Tutoriel 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!