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

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不工作的原因是浏览器根据（与设备无关的）像素进行布局。尽管物理像素可能小得多，因此它们可以渲染小于像素的元素，但这不会影响布局。

由于 cssborder属性影响布局，浏览器将只允许整数像素宽度。该box-shadow只影响渲染，而不是布局，因此支持分数单位。

Answer 4

我认为可以通过此处的transform或translate选项来实现。例如：

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

将呈现一种半角边框。另请查看Priit Pirita的文章，这可能会有用:)