HTML:亚像素边框

Question

是否可以使用比1px更薄的边框并且在IE6 +中工作并且不是图像并且在视觉上正确呈现？

谢谢.

Answer 1

编辑:我已经监督了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>

Answer 2

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

Answer 3

不能.您不能显示小于一个像素的尺寸,因为像素是显示器的基本单位.无论如何,我所知道的浏览器都不允许您指定子像素宽度.它们只是向上舍入到1px或向下到0px.