web-dev-qa-db-fra.com

Bordure CSS moins de 1px

Duplicate possible:
HTML: bordure sous-pixel

border:1px est trop gros. Je veux l'avoir deux fois plus petit, mais je ne sais pas comment faire. border: 0.5px solid; ne fonctionne pas. Je sais qu'il existe une solution avec background img, mais avec CSS, ce sera plus rapide.

cssborder
91
Wizard

Un pixel est la plus petite valeur unitaire à utiliser pour le rendu. Mais vous pouvez tromper l'épaisseur avec des illusions d'optique en modifiant les couleurs. (L'œil ne peut voir qu'une certaine résolution aussi.)

Voici n test pour prouver ce point:

div { border-color: blue; border-style: solid; margin: 2px; }

div.b1 { border-width: 1px; }
div.b2 { border-width: 0.1em; }
div.b3 { border-width: 0.01em; }
div.b4 { border-width: 1px; border-color: rgb(160,160,255); }
<div class="b1">Some text</div>
<div class="b2">Some text</div>
<div class="b3">Some text</div>
<div class="b4">Some text</div>

Sortie

enter image description here

Ce qui donne l’illusion que la dernière DIV a une largeur de bordure plus petite, car la bordure bleue se confond davantage avec le fond blanc.

Edit: Solution alternative

Les valeurs alpha peuvent également être utilisées pour simuler le même effet, sans qu'il soit nécessaire de calculer et de manipuler les valeurs RVB.

.container {
  border-style: solid;
  border-width: 1px;
  
  margin-bottom: 10px;
}

.border-100 { border-color: rgba(0,0,255,1); }
.border-75 { border-color: rgba(0,0,255,0.75); }
.border-50 { border-color: rgba(0,0,255,0.5); }
.border-25 { border-color: rgba(0,0,255,0.25); }
<div class="container border-100">Container 1 (alpha = 1)</div>
<div class="container border-75">Container 2 (alpha = 0.75)</div>
<div class="container border-50">Container 3 (alpha = 0.5)</div>
<div class="container border-25">Container 4 (alpha = 0.25)</div>
138
Yanick Rochon

Il est impossible de tracer une ligne sur un écran plus fin qu'un pixel. Essayez plutôt d’utiliser une couleur plus subtile pour la bordure.

3
duskwuff

essayez de donner une bordure en%, par exemple 0,1%, selon vos besoins.

2
Gagan Deep

La largeur minimale que votre écran peut afficher est de 1 pixel. Donc, il est impossible d'afficher moins de 1px. 1 pixel ne peut avoir qu'une seule couleur et ne peut pas être divisé.

2
Sharpless512

Vous pouvez toujours définir l'attribut border et lui attribuer la valeur 0 pixels, ce qui est utile lorsqu'un côté a besoin de cette valeur.

Exemples:

.box1 {
  border: 1px solid black;
  border-left: 0;
}

.box2 {
  border-color: black;
  border-style: solid;
  border-width: 1px 1px 1px 0;
}
1
arttronics