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。

Answer 4

我不知道IE8-10（IE6-7绝对不行），但在Chrome和FF中，我得到了最薄的框阴影边框。最适合获得1px＆lt; hr＆gt;而不是autorendered 2px，但也可以在边框上使用。

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

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

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

Answer 5

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

int main()
{
    int a = 3, b = 5;
    vector<int> c{ 2,3,5,10,7,1,2,3 };

    auto foo = [a,b,&c](){c[a] += b;};
    return 0;
}

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

在UHD屏幕上输出以下内容：

Answer 6

从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，因此，如果您将其用于其他用途，则需要寻找另一种方式（还有其他几种方式）。

这不是特别干净，但似乎始终如一。

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

Answer 7

也许迟到了，

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

使用ridge（替代）进行薄边// IMO

Answer 8

你可以像这样改变这条线：

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

Answer 9

要在高DPI / @ 2x /视网膜显示器上渲染原生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边框。

Answer 10

对我来说这很有效：

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

Answer 11

尝试添加矩形阴影

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

Answer 12

试试

 border-top: 1px solid #c9d6df;

小于

 border: 1px solid #c9d6df;

Answer 13

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

HTML：亚像素边框

13 个答案: