HTML：子像素边框

问题描述 投票：0回答：17

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

谢谢你。

html border subpixel
17个回答
10
投票

我认为你可以使用像

em
这样的单位来定义边框的宽度，它会小于1px，并且它是有效的。然而，正如威尔·马丁所说，出于显示目的，它只会将其向上或向下舍入为整个像素。

10
投票

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

4
投票

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

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

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

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

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

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

2
投票

虽然目前在任何版本的 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>

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

1
投票

你可以像这样变换线条：

.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);}
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.5 像素的框阴影：

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

尝试添加盒子阴影

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

编辑：Chrome 98（2022 年 2 月 1 日）添加了对小于 1px 的 

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
，所以如果你将它用于其他用途，你将需要找到另一种方法（还有其他几种方法）。

这不是特别干净，但似乎始终有效。

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

0
投票

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

0
投票

也许发帖晚了，

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

使用脊线（替代方案）作为细边框//IMO

0
投票

对我来说这有效：

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

尝试

 border-top: 1px solid #c9d6df;

小于

 border: 1px solid #c9d6df;
0
投票

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

0
投票

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

如果你想像我一样有一条水平线，你可以用 

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>

0
投票

要轻松获得看起来小于像素的边框，只需将边框元素的不透明度设置为0.1即可。

border{
  opacity: 0.1;
}
0
投票

可以使用 box-shadow 作为边框来完成：

box-shadow: 0px 0px 0.5px 1px rgba(0,0,0,1);
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.