CSS边框小于1像素

前端之家收集整理的这篇文章主要介绍了CSS边框小于1像素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Possible Duplicate:
07000

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

解决方法

像素是渲染某物的最小单位值。但你可以通过修改颜色通过视觉幻觉来欺骗厚度。 (眼睛只能看到一个 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,255,1); }
.border-75 { border-color: rgba(0,0.75); }
.border-50 { border-color: rgba(0,0.5); }
.border-25 { border-color: rgba(0,0.25); }
<div class="container border-100">Container 1 (1px)</div>
<div class="container border-75">Container 2 (0.75px)</div>
<div class="container border-50">Container 3 (0.5px)</div>
<div class="container border-25">Container 4 (0.25px)</div>

猜你在找的CSS相关文章