CSS 边框小于1px

可能的复制品:
HTML: 子像素边界

默认的 border:1px太大。但是，border: 0.5px solid;不工作。 是否有一个 CSS 解决方案，可以使边框的大小减少一半？

260680 次浏览
小开

在屏幕上画一条比一个像素还细的线是不可能的。尝试使用一个更加微妙的颜色来代替边框。

小开

例如，根据您的需要，尝试在% 中给出0.1% 的边框。

小开

屏幕可以显示的最小宽度是1个像素。所以不可能显示小于1px。1像素只能有1种颜色，不能拆分。

小开
最佳答案

像素是用来渲染的最小单位值，但是你可以通过修改颜色来欺骗视觉错觉的厚度(眼睛也只能看到 一定的分辨率)。

测试证明了这一点:

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>

输出

enter image description here

这给人一种错觉，以为最后一个 DIV的边框宽度较小，因为蓝色边框与白色背景的混合更多。

编辑: 替代解决方案

Alpha 值也可以用来模拟同样的效果，而不需要计算和操作 RGB 值。

.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>


提交答案