HTML：子像素边框

Question

是否有可能有一个小于 1px 的边框并且在 IE6+ 中工作并且不是图像并且在视觉上正确呈现？

谢谢你。

原文由 Francisc 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我认为您可以使用像 em 这样的单位来定义边框的宽度，结果小于 1px，并且有效。然而，就像 Will Martin 所说的那样，出于显示目的，它只会向上或向下舍入到一个完整的像素。

原文由 crimson_penguin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

编辑： 我已经监督了 IE6 的限制，但我把答案留给其他人……

它可能与 transform:scale(0.5) 并在内部放置一个带有 border:1px; 的边框元素。所以你得到一个半像素的边框，它（虽然被欺骗并且依赖于浏览器）显示在屏幕上。但我用这个技巧来打印。

当然，你必须调整元素的内容，或者玩 position

 .outer {
  border:1px solid green;
}

.halfpix {
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -ms-transform:scale(0.5);
  -webkit-transform:scale(0.5);
  transform:scale(0.5);
  width:200px;
  height:100px;
  border:1px solid black;
  }

 <div class="outer">

  <div class="halfpix">
    </div>
  zoom browser window if your browser does not display
  </div>

原文由 halfbit 发布，翻译遵循 CC BY-SA 4.0 许可协议