CSS边框小于1 px

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (577)

border:1px太大了。我想要它的一半大小,但我不知道如何做到这一点。border: 0.5px solid;不起作用。我知道有一个解决方案background img,但使用CSS会更快。

提问于
用户回答回答于

像素是用于渲染某些东西的最小单位值。但是你可以通过修改颜色来控制光学幻影的厚度。(眼睛也只能看到一定的分辨率。)

这是一个测试来证明这一点:

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>

输出

备用解决方案

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>
用户回答回答于

在屏幕上画一条线是不可能的,它比一个像素还要薄。尝试使用更微妙的颜色来代替边框。

扫码关注云+社区

领取腾讯云代金券