Comment définir la ligne de bordure intérieure en CSS-tutoriel CSS-php.cn

Comment définir la ligne de bordure intérieure en CSS

藏色散人

Libérer： 2023-01-03 09:27:16

original

10281 Les gens l'ont consulté

Comment définir la ligne de bordure intérieure du CSS : créez d'abord un exemple de fichier HTML ; puis définissez le div ; enfin, utilisez l'attribut border et l'attribut box-sizing pour ajouter la bordure intérieure.

Comment définir la ligne de bordure intérieure en CSS

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur DELL G3.

En CSS, vous pouvez utiliser l'attribut border avec l'attribut box-sizing pour ajouter une bordure intérieure. L'attribut border est utilisé pour ajouter une bordure et l'attribut box-sizing est utilisé pour définir certains éléments d'une certaine manière pour s'adapter à la zone spécifiée ; définissez la valeur de l'attribut box-sizing sur la valeur border-box pour ajouter une bordure intérieure ; .

Jetons d’abord un coup d’œil à un exemple de définition de bordures intérieures avec CSS.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.container {
width: 30em;
border: 1em solid;
}
div.box1 {
width: 50%;
border: 1em solid red;
float: left;
}
div.box2 {
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="box1">普通边框！！</div>
<div class="box2">内边框！！</div>
</div>
</body>
</html>

Copier après la connexion

attribut box-sizing

L'attribut box-sizing vous permet de définir des éléments spécifiques qui correspondent à une certaine zone d'une manière spécifique.

Par exemple, si vous devez placer deux boîtes bordées côte à côte, vous pouvez le faire en définissant box-sizing sur "border-box". Cela amène le navigateur à afficher une boîte avec la largeur et la hauteur spécifiées, et à placer les bordures et le remplissage dans la boîte.

Syntaxe

box-sizing: content-box|border-box|inherit;

Copier après la connexion

Valeur de l'attribut :

content-box : Il s'agit du 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. Remplissage et disposition des bordures et dessin des éléments, sauf la largeur et la hauteur spécifiées

border-box : Spécifiez la largeur et la hauteur (attributs min/max) pour déterminer la bordure de l'élément. Autrement dit, la spécification de la largeur et de 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.

[Apprentissage recommandé : Tutoriel vidéo CSS]

Exemple :

<!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

Rendu :

Comment définir la ligne de bordure intérieure en CSS