CSS边框小于1像素

Question

CSS边框小于1像素

cssborder

160

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

默认的border:1px太大了。然而，border:0.5px solid;不起作用。有没有CSS解决方案可以使边框大小减半？

- Wizard

27

我认为你不理解像素是如何工作的。这就像希望一个比一位还要小的值大小。 - Yanick Rochon

5

好的，我现在明白了，不能小于1像素。 - Wizard

9

从技术上讲，这是可能的，因为像素是一种相对计量单位。但这可能会颠覆你的世界观。 - hakre

5

我投票支持重新开放此问题，因为“完全重复”的问题并没有给出解决此问题的具体方法。它确实解释了“ipx最小值”的限制，但没有给出解决方案的绕道路线。 - Yanick Rochon

7

现代浏览器上，UHD屏幕上现在可以实现小于1像素的像素宽度。鉴于这个问题没有指定浏览器兼容性，因此可以重新打开这个问题以允许回答涵盖这一点。 - verism

显示剩余7条评论

4个回答

6

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

- user149341

7

使用对比更强烈的边框会给人一种更厚实的印象，而与背景色更加融合（渐变）的颜色则会给人一种轻盈的印象（更薄）。 - Yanick Rochon

1

这已经不再正确了。0.5像素是有效的，并且它可以工作。 - Vincent

@Vincent 与浏览器相关。例如，即使在高分辨率显示器上，Chrome 70也将亚像素值视为1像素。 - user149341

2

在高分辨率显示器上，这并不是真实的。1像素可以转换为2或3个物理设备像素。 - Roman Zenka

2

尝试根据您的需要以百分比方式设置边框，例如0.1％。

- Gagan Deep

3

无法工作，Chromium 49。 - Vitaly Zdanevich

2

您的屏幕能够显示的最小宽度为1像素，因此不可能显示小于1像素的内容。1个像素只能有一种颜色，不能被分割。

- Sharpless512

9

但是，对于视网膜屏幕而言... - pronebird

3

我的浏览器在Retina显示屏上渲染出来的输入框边框比HTML的1像素边框还要细。据我所知，HTML的1像素边框实际上会被缩放成两个Retina像素，但CSS规范没有选项来控制这种行为。 - Roy Prins

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yanick Rochon · Accepted Answer

像素是呈现某物的最小单位值，但您可以通过修改颜色来使用光学幻觉来欺骗厚度（眼睛只能看到一定分辨率）。

这里有一个测试来证明这一点：

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>