CSS边框小于1px
CSS边框小于1px
提问于 2012-12-15 17:51:13
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-12-15 18:11:29
像素是渲染对象的最小单位值，但您可以通过修改颜色来使用光学错觉来欺骗厚度(眼睛也只能看到最大的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>
Stack Overflow用户
发布于 2012-12-15 17:52:40
在屏幕上画一条比一个像素还细的线是不可能的。请尝试使用更微妙的边框颜色。
Stack Overflow用户
发布于 2012-12-15 17:54:24
尝试根据您的需要以%为单位添加边框，以获取0.1%的边框。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13891177
复制相关文章
相似问题