Comment puis-je créer une bordure CSS plus petite que la largeur de la division qui la contient ?

Création d'une bordure plus petite que la largeur du Div

En CSS, la largeur d'une bordure est généralement déterminée par la largeur de l'élément qu'elle contient entoure. Si vous souhaitez que votre bordure soit plus petite que la largeur de son élément conteneur, vous pouvez utiliser des pseudo-éléments. Voici comment procéder :

 largeur : 200 px ;<br> hauteur : 50 px ;   <br> position : relative ;<br> z-index : 1;<br> arrière-plan : #eee;<br>}</p><p>div:avant {<br> contenu : "" ;<br> position : absolu;<br> gauche : 0;<br> bas : 0;<br> hauteur : 1px;<br> largeur : 50 % ;  /<em> ou 100px </em>/<br> border-bottom : 1px magenta uni ;<br>}

<div>Item 2</div>

Dans cet exemple, nous utilisons le pseudo-élément :before pour créer une bordure qui ne fait que la moitié de la largeur de le conteneur div. Nous faisons cela en définissant la propriété width de l'élément :before à 50 % ou à la largeur souhaitée (par exemple, 100 px). Nous positionnons également l'élément :before de manière absolue dans le div du conteneur en utilisant la propriété position: absolue.

La propriété z-index garantit que l'élément :before est positionné au-dessus du contenu du div du conteneur. Cela empêche la bordure d'être cachée derrière le contenu.

En utilisant des pseudo-éléments, vous pouvez créer des bordures qui ont des largeurs et des positions différentes de celles de leurs éléments conteneurs. Cette flexibilité vous permet de créer des effets visuels personnalisés et d'améliorer le design de vos pages Web.

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!

css if using class Property this position border background

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn