Un pixel est la plus petite valeur unitaire avec laquelle on peut rendre quelque chose, mais on peut tromper l'épaisseur avec des illusions d'optique en modifiant les couleurs (l'œil ne peut voir que jusqu'à un pixel). certaine résolution aussi).
Voici un 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 le dernier DIV a une largeur de bordure plus petite, car la bordure bleue se fond davantage dans le fond blanc.
Edit : Solution alternative
Les valeurs alpha peuvent également être utilisées pour simuler le même effet, sans devoir calculer et 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>
27 votes
Je pense que vous ne comprenez pas comment les pixels fonctionnent. C'est comme vouloir une taille de valeur inférieure à un bit.
5 votes
Ok, je comprends maintenant que ça ne peut pas être moins de 1 px.
9 votes
Techniquement, c'est possible, car les pixels sont une unité de mesure relative. Mais cela va probablement bouleverser votre vision du monde.
0 votes
Vous pouvez essayer d'avoir quelque chose qui ressemble à cela en trompant l'œil humain avec des bordures semi-transparentes très bien faites ou encore mieux des ombres en boîte, mais elles s'arrondiront toutes à un pixel de périphérique afin d'être rendues.
5 votes
J'ai voté pour la réouverture de cette question car le "duplicata exact" ne donne pas de solution concrète à ce problème. Il explique bien la limitation "ipx minimum", mais ne donne pas de solution de contournement.
7 votes
Les largeurs de pixel inférieures à 1px sont désormais possibles sur les écrans UHD (dans les navigateurs modernes, du moins). Étant donné que cette question ne précise pas la compatibilité des navigateurs, elle pourrait sûrement être rouverte pour permettre une réponse qui aborde ce point.
1 votes
Vous pouvez utiliser la propriété css 'scale' ;)
0 votes
Vous devez utiliser l'échelle : atirip.com/2013/09/22/yes-we-can-do-fraction-of-a-pixel
1 votes
@YanickRochon dans l'iPhone 12 il y a 1170 pixels physiques réels dans une rangée mais en CSS ces pixels correspondent à 390 pixels css viewport. En CSS, un pixel n'est pas un pixel, c'est une unité de mesure abstraite. Et il ne correspond pas non plus à des cm/pouces. En outre, il existe également une mise à l'échelle avec Ctrl+plus.
0 votes
@Gherman en ce qui me concerne, c'est une aberration. Le système d'exploitation peut remplacer les pixels physiques par autre chose, ou fournir une unité différente (par ex.
em), l'idée de "pixels physiques réels" et de "pixels css de l'écran" ne dépend que de la plate-forme. Tout comme OpenGL fournit une abstraction de la zone d'affichage. La grande majorité des appareils utilisent des pixels physiques et, jusqu'à la sortie de nouvelles technologies, ce sera toujours le cas pour la plupart des utilisations.0 votes
@YanickRochon Les ordinateurs et la programmation sont pleins d'aberrations, d'abstractions, d'émulations, de traductions et de caractéristiques dépendant de l'implémentation. Nous, les développeurs, devons y faire face parce que c'est notre travail. En tant que développeur web, je n'ai pas mon mot à dire sur le fonctionnement des navigateurs. Je travaille avec ce que j'ai. Plus précisément, le responsable de l'interface utilisateur m'a demandé de créer une bordure inférieure à 1 px et c'est ainsi que je suis arrivé ici. Ce type prend des décisions et je dois les suivre.