Comment puis-je créer des bordures CSS basées sur un pourcentage en utilisant uniquement du CSS ?

Bordures CSS : définir l'épaisseur en pourcentage : une approche CSS uniquement

Bien que les bordures CSS ne prennent pas en charge nativement les pourcentages, il existe une solution intelligente uniquement CSS pour obtenir cet effet.

Wrapper Element Magic

Pour simuler des bordures de pourcentage, utilisez un élément wrapper avec le propriétés suivantes :

1. Couleur d'arrière-plan : Définissez la couleur d'arrière-plan de l'élément wrapper sur la couleur de bordure souhaitée.
2. Padding : Définissez le wrapper remplissage de l'élément en pourcentages pour créer l'illusion de largeur de bordure.
3. Arrière-plan de l'élément color : Définissez la couleur d'arrière-plan de l'élément dans le wrapper sur la couleur souhaitée (transparente ou autre).

Exemple de code :

Pour démontrer, voici HTML et CSS code pour créer un élément avec un côté de 25% de largeur "borders":

HTML:

<div class="faux-borders">
    <div class="content">
        This is the element to have percentage borders.
    </div>
</div>

CSS:

.faux-borders {
    background-color: #f00;
    padding: 1px 25%; /* set padding to simulate border */
}
.content {
    background-color: #fff;
}

Cette technique imite les bordures en pourcentage en en utilisant un rembourrage sur un élément wrapper pour créer l'illusion.

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!