html边框不占像素,CSS边框小于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); }

Some text

Some text

Some text

Some text

这给出了错觉，最后的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); }

Container 1 (1px)

Container 2 (0.75px)

Container 3 (0.5px)

Container 4 (0.25px)