13

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

谢谢你。

4

15 回答 15

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>

于 2015-06-01T15:42:28.470 回答
9

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

于 2011-04-18T22:50:39.960 回答
3

我不知道 IE8-10（IE6-7 肯定不行），但在 Chrome 和 FF 中，我得到了最薄的带有框阴影的边框。最好获得 1px <hr> 而不是自动渲染的 2px，但也可以在边框上使用。

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

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

.thin {
    border: 1px solid white;
    box-shadow: 0 0 1px black;
}
于 2013-06-18T15:55:18.030 回答
2

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

于 2011-04-18T22:45:30.880 回答
1

尽管（当前）在任何版本的 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>

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

在此处输入图像描述

于 2016-11-27T20:21:17.803 回答
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);}
于 2017-03-23T10:18:03.847 回答
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 散布的 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 边框。

于 2017-11-22T07:08:32.070 回答
1

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

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

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

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

于 2020-06-04T20:37:34.537 回答
1

尝试添加一个盒子阴影

box-shadow: 0px 0px 1px 0px black;
于 2020-07-08T04:33:47.707 回答
0

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

于 2012-07-27T10:03:50.597 回答
0

也许迟到的帖子，

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

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

于 2017-03-20T06:45:23.450 回答
0

对我来说，这很有效：

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

尝试

 border-top: 1px solid #c9d6df;

小于

 border: 1px solid #c9d6df;
于 2021-03-24T09:04:39.893 回答
0

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

于 2021-07-19T07:36:29.747 回答
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>

于 2021-11-21T17:24:56.753 回答