CSS边框不到1px

Question

  

可能重复：
  HTML: Sub-pixel border

border:1px太大了。我希望它有一半的尺寸，但我不知道该怎么做。 border: 0.5px solid;不起作用。我知道有background img的解决方案，但使用CSS会更快。

Answer 1

像素是用于渲染某物的最小单位值。但是你可以通过修改颜色来欺骗厚度。 （眼睛也只能看到certain resolution。）

以下a test证明了这一点：

div { border-color: blue; border-style: solid; margin: 2px; }

div.b1 { border-width: 1px; }
div.b2 { border-width: 0.1em; }
div.b3 { border-width: 0.01em; }
div.b4 { border-width: 1px; border-color: rgb(160,160,255); }

<div class="b1">Some text</div>
<div class="b2">Some text</div>
<div class="b3">Some text</div>
<div class="b4">Some text</div>

输出

这让人觉得最后DIV的边框宽度较小，因为蓝色边框与白色背景混合得更多。

---

编辑：替代解决方案

Alpha值也可用于模拟相同的效果，而无需计算和操作RGB值。

.container {
  border-style: solid;
  border-width: 1px;
  
  margin-bottom: 10px;
}

.border-100 { border-color: rgba(0,0,255,1); }
.border-75 { border-color: rgba(0,0,255,0.75); }
.border-50 { border-color: rgba(0,0,255,0.5); }
.border-25 { border-color: rgba(0,0,255,0.25); }

<div class="container border-100">Container 1 (alpha = 1)</div>
<div class="container border-75">Container 2 (alpha = 0.75)</div>
<div class="container border-50">Container 3 (alpha = 0.5)</div>
<div class="container border-25">Container 4 (alpha = 0.25)</div>

Answer 2

在屏幕上绘制一条比一个像素更薄的线是不可能的。尝试使用更精细的颜色作为边框。

Answer 3

根据您的需要尝试以％为单位给出边框，例如0.1％。

Answer 4

屏幕可显示的最小宽度为1像素。所以不可能显示不到1px。 1个像素只能有1种颜色，不能分割。

Answer 5

您仍然可以定义border属性并为其指定0像素值，当一方需要此值时非常有用。

示例：

.box1 {
  border: 1px solid black;
  border-left: 0;
}

.box2 {
  border-color: black;
  border-style: solid;
  border-width: 1px 1px 1px 0;
}