132

可能重复：
HTML：亚像素边框

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

4

4 回答 4

193

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

这是一个测试来证明这一点：

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>

输出

在此处输入图像描述

这给人一种错觉，即最后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>

于 2012-12-15T10:11:29.303 回答
5

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

于 2012-12-15T09:52:40.080 回答
3

尝试根据您的需要以 % 为边框，例如 0.1%。

于 2012-12-15T09:54:24.397 回答
3

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

于 2012-12-15T10:08:29.320 回答