HTML：亚像素边框

| 是否可以有一个比1px更细的边框，并且可以在IE6 +中使用，并且不是图像，并且可以正确呈现视觉效果？谢谢。

已邀请:

10 个回复

我认为您可以使用诸如“ 0”之类的单位定义边框的宽度，该宽度将小于1px，这将是有效的。但是，就像威尔·马丁说的那样，出于显示目的，它只会将其向上或向下舍入到整个像素。

编辑：我已经监督了IE6限制，但是我将答案留给其他人... 可能带有transform:scale(0.5)并在其中放置带有border:1px;的border元素。因此，您得到了一个半像素的边框，该边框（尽管被欺骗并取决于浏览器）显示在屏幕上。但是我使用该技巧进行打印。当然，您必须调整元素的内容，或玩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>

谦响局豢报

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

谷起

我不了解IE8-10（绝对不是IE6-7），但是在Chrome和FF中，我得到了最薄的边框阴影。最好获得1px

而不是autorendered 2px，但也可以在边框上使用。在FF中，HR上的细边框比Chrome更突出，但Chrome也会渲染2px。 http://jsfiddle.net/GijsjanB/3G28N/

.thin {
    border: 1px solid white;
    box-shadow: 0 0 1px black;
}

刷遍派戳

尽管（当前）在任何版本的IE或Edge中都无法实现，但是在最新版本的Firefox和Chrome上，您现在可以使用小于1像素的边框宽度值。

.borderTest {
	box-sizing: border-box;
	display: block;
	margin: 0.5em;
	padding: 0.5em;
	width: calc( 100% - 1em );
}
.borderTest:nth-child(1){
	border: 1px solid #000
}
.borderTest:nth-child(2){
	border: 0.75px solid #000
}
.borderTest:nth-child(3){
	border: 0.5px solid #000
}
.borderTest:nth-child(4){
	border: 0.25px solid #000
}

<div class=\"borderTest\">1px</div>
<div class=\"borderTest\">0.75px</div>
<div class=\"borderTest\">0.5px</div>
<div class=\"borderTest\">0.25px</div>

很缴

0.1em显示的边框小于1px，尝试用1px的虚线框将其与0.1em进行比较

埃输林桨铃

也许是后期发布，

<table>
  <tr>
    <td style=\"border:1px ridge\">
    ....text....
    </td>
   </tr>
 <table>

使用ridge（alternative）进行细边框// IMO

亲奋漏

您可以像这样转换行：

.thin{ -ms-transform:scale(1, 0.5); -webkit-transform:scale(1, 0.5); transform:scale(1, 0.5);}

或者，如果线是垂直的

.thin{ -ms-transform:scale(0.5, 1); -webkit-transform:scale(0.5, 1); transform:scale(0.5, 1);}

导力疵谜

要在高DPI / @ 2x / retina显示器上渲染本机1px边框，有一些技巧。在Firefox和Safari（macOS和iOS）上，使用0.5px边框：

/* Fallback: Most browsers now render 0.5px as 1px though */
.el {
  border: 1px solid red;
}
.retina .el {
  border: 0.5px solid red;
}

在Chrome上，使用散布为0.5px的矩形阴影：

.retina-chrome .el {
  box-shadow: 0 0 0 0.5px red;
}

使用JS将类添加到HTML元素中，以便仅定位@ 2x +显示。

if (window.devicePixelRatio >= 2) {
  document.documentElement.classList.add(
    window.chrome ? \'retina-chrome\' : \'retina\'
  );
}

对于@ 1x显示器，请使用较浅的1px彩色边框。

靛取糕奖穿

对我来说，这工作：我需要一个小于1像素的白色边框所以我在边框颜色上添加了一些不透明度，它开始看起来比1px细像这样：border-top: 1px solid #ffffff26;

要回复问题请先登录或注册

HTML：亚像素边框

10 个回复

发起人

border

html

subpixel

问题状态

HTML：亚像素边框

与内容相关的链接

10 个回复

发起人

border

html

subpixel

问题状态