HTML：亚像素边框答案

【问题标题】：HTML: Sub-pixel borderHTML：亚像素边框
【发布时间】：2011-04-18 22:38:51
【问题描述】：

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

谢谢。

【问题讨论】：

你为什么要问？有没有你在看的实现？
听起来像是灾难的秘诀。整个像素很难在浏览器中保持一致。
复制更好的问题和答案，遗憾地被标记为与此重复：stackoverflow.com/questions/13891177/css-border-less-than-1px

标签： html border subpixel

【解决方案1】：

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

【讨论】：

没错，在某些情况下，em 单位评估为部分像素是正确的。我忘记了。
em 技巧能否在高清屏幕上获得更细的线条，从而绘制具有多个像素的“1px”线条？
很晚了，但是应该！
这不会与任何浏览器上的等效px 单元产生不同的结果。

【解决方案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>

【讨论】：

这是回答问题的唯一答案。谢谢！
您也可以使用scaleX(0.5) 或scaleY(0.5) 仅在一个维度上进行缩放，很好的答案！

【解决方案3】：

我不知道 IE8-10（IE6-7 肯定不行），但是在 Chrome 和 FF 中，我得到了最薄的带有 box-shadow 的边框。最好获得 1px

而不是自动渲染的 2px，但也可以在边框上使用。

HR 上的细边框在 FF 中比 Chrome 更突出，而且 Chrome 也渲染 2px。

http://jsfiddle.net/GijsjanB/3G28N/

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

【讨论】：

【解决方案4】：

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

【讨论】：

现代分辨率不再是这样。显示器可以渲染亚像素质量的显示项目，许多字体实际上需要它才能在视网膜风格的显示器上看起来不错。
打印也是一个问题——Chrome 52 忽略了（可能是不知道的）打印机像素，并使用 1px = 1/72in 作为可能的最细线。尝试了分数像素、英寸、ems——没有一个会创建比 1/72in 更细的线条。即使在印刷媒体查询中。很想看看使用图像是否有效，但我怀疑我会接受胖乎乎的规则

【解决方案5】：

虽然（目前）这在任何版本的 IE 或 Edge 中都不可能，但在最新版本的 Firefox 和 Chrome 上，您现在可以使用小于 1px 的边框宽度值。

.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>

这会在超高清屏幕上输出以下内容：

【讨论】：

感谢您指出这一点！仅供参考，如果有人对 Chrome/FF 和 IE 中的不同边框计算有疑问，请记住这一点。
所有在 Chrome 62 macOS 10.13 上都显示相同（视网膜显示 @2x）。使用box-shadow 技巧虽然有效。

【解决方案6】：

你可以像这样变换线条：

.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);}

【讨论】：

【解决方案7】：

要在高 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.5 像素的 box-shadow：

.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 边框。

【讨论】：

【解决方案8】：

尝试添加一个盒子阴影

box-shadow: 0px 0px 1px 0px black;

【讨论】：

【解决方案9】：

编辑：Chrome 98（2022 年 2 月 1 日）添加了对小于 1 像素的 border-width 值的直接支持。

截至 2020 年年中，当前版本的 Safari 和 Firefox 都支持border-width: .5px。

另一方面，Chrome 会将其视为1px。

您可以通过以下方式检测浏览器是否支持它：

var el = document.createElement('div');
el.style.position = 'fixed';
el.style.borderTop = '.5px solid';
document.body.appendChild(el);
var hasSubpixelBorder = el.getBoundingRect().height < 1;
document.body.removeChild(el);

如果您在启动时这样做，请确保在创建 document.body 之后调用它。

如果不支持（例如 Chrome），您可以向 document.body 或某些父元素添加一个类，以使后代采用不同的边框样式：

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .noSubpixelBorder .border-top {
        border-top-width: 0;
        background-image: linear-gradient(180deg, var(--mycolor) 0, var(--mycolor) .5px, transparent 0);
    }
}
@media (-webkit-min-device-pixel-ratio: 3) and (-webkit-max-device-pixel-ratio: 3.5), (min-resolution: 3dppx) and (max-resolution: 3.5dppx) {
    .noSubpixelBorder .border-top {
        background-image: linear-gradient(180deg, var(--mycolor) 0, var(--mycolor) .333333px, transparent 0);
    }
}

您可以使用多个线性渐变来实现多边的边框。这接管了background-image，因此如果您将其用于其他用途，您将需要找到另一种方式（还有其他几种方式）。

这不是特别干净，但它似乎一直有效。

如果你想变得超级狡猾，你可以通过动态计算样式表来支持奇怪的像素比率。

【讨论】：

【解决方案10】：

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

【讨论】：

我看不出 Chrome 20 有什么不同。

【解决方案11】：

也许迟到了，

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

使用 ridge(alternative) 细边框 //IMO

【讨论】：

错误答案。 ridge: "显示一个带有 3D 效果的边框，就像它从页面中出来一样"-MDN

【解决方案12】：

对我来说这很有效：

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

【讨论】：

【解决方案13】：

试试

 border-top: 1px solid #c9d6df;

小于

 border: 1px solid #c9d6df;

【讨论】：

【解决方案14】：

您可以使用 CSS 边框图像将 SVG 或其他图像设置为边框，然后您可以使图像线条尽可能窄。它可能仍会在屏幕上呈现为 1px，但如果您随后打印或保存网页，则将保留真实大小。

【讨论】：

【解决方案15】：

有了边框，你很难实现更细的线条！

如果你想像我一样有一条水平线，你可以用height代替border：

注意：也许您需要放大才能看到两条线之间的真正区别！

.normal {
  height: 1px;
  background-color: #8bacda;
}
.thinner {
  height: 0.01em;
  background-color: #8bacda;
}

<p>Normal Line</p>
<div class="normal"></div>
<p>Thinner Line</p>
<div class="thinner"></div>

【讨论】：