Comment ajouter une bordure intérieure en CSS3-tutoriel CSS-php.cn

Comment ajouter une bordure intérieure en CSS3

王林

Libérer： 2020-11-30 17:21:48

original

2705 Les gens l'ont consulté

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.

Comment ajouter une bordure intérieure en CSS3

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:

Copier après la connexion

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>

Copier après la connexion

pour obtenir l'effet :

Comment ajouter une bordure intérieure en CSS3