它没有显示边框宽度大小的半像素

Question

我可以像这样在边框宽度上有一半像素，我试了但是它不能正常工作

  element.style {
    border-left-width: 0.5px;
    border-color: #818181;
    border-left-style: solid;
   }

Answer 1

大多数浏览器都无法正确显示分数像素边框。

最好在这种情况下使用“box-shadow”。它可以显示分数像素。

.one-pixel-border {  
    box-shadow: -1px 0 0 #818181;
}

.half-pixel-border {  
    box-shadow: -.5px 0 0 #818181;
}

.quater-pixel-border {
    box-shadow: -.25px 0 0 #818181;
}

<div class="one-pixel-border">
  one pixel border
</div>
<div class="half-pixel-border">
  half pixel border
</div>
<div class="quater-pixel-border">
  quater pixel border
</div>

Answer 2

从理论上讲，你不能这样做，因为像素是用来在屏幕上显示内容的最小物理单位;但是，您可能希望为Retina等高分辨率设备做到这一点。

Answer 3

border-width:0.5px不起作用的原因是浏览器针对（设备无关）像素进行布局。即使物理像素可能小得多，因此它们可以渲染小于像素的元素，但这不会影响布局。

由于css border属性会影响布局，因此浏览器只允许整数像素宽度。 box-shadow仅影响渲染而不影响布局，因此支持小数单位。

Answer 4

我认为这可以通过transform或translate选项实现。例如：

border-bottom: 1px #ff0000 solid;
transform: scaleY(0.5);

将呈现一种半角边框。另请查看可能有用的article by Priit Pirita：）

Answer 5

你可以尝试通过使用em来获得更小的边界然后1px。

但无论如何它总是圆形到全像素，因为像Jeremy说它是最小的显示单元。