Les bordures CSS peuvent-elles être spécifiées en pourcentage ?

Épaisseur des bordures CSS en pourcentage : est-ce possible ?

Question :

En essayant de créer un élément avec des bordures qui couvrent un pourcentage spécifié de la fenêtre du navigateur, vous avez essayé d'utiliser border-width:10%;, mais cela a échoué. Existe-t-il un moyen de définir l'épaisseur de la bordure en CSS à l'aide de pourcentages ?

Réponse :

La bordure ne prend pas en charge le pourcentage... mais c'est toujours possible. ..

Selon les spécifications CSS, les pourcentages ne sont pas pris en charge pour la bordure widths :

border-width

Valeur

Pourcentages

frontière- top-width

`

hériter`

border-width	Value	Percentages
border-top-width	`	inherit`	N/A

N/A

Non scripté solution :

Étant donné que les bordures CSS ne prennent pas en charge les pourcentages, envisagez d'utiliser un élément wrapper pour simuler les bordures :

1. Définissez la couleur d'arrière-plan du wrapper sur la couleur de bordure souhaitée.
2. Utilisez un remplissage avec des pourcentages sur l'élément wrapper, au lieu de la largeur de la bordure.
3. Définissez la valeur de l'élément background-color à la couleur de contenu souhaitée.

Cette technique simule les bordures de pourcentage à l'aide d'un remplissage.

Exemple :

Pour créer 25 % bordures latérales en largeur en utilisant ceci approche :

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;
}

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!