理论上说,1px已经是屏幕的最小单位了,那么怎么画一条0.5px的线呢?
-
谷歌上如果直接设置为0.5px,则会直接当作1px来呈现
(图片为放大后,为了便于观察)
-
火狐也是如此
- 解决方法
利用transform
的缩放
.half-px {
border-bottom: 1px solid #000;
transform: scaleY(0.5);
}
谷歌:(线变细了,也变虚了)
火狐:(完美)
利用box-shadow
: 设置box-shadow的第二个参数为0.5px,表示阴影垂直方向的偏移为0.5px
div {
width: 300px;
background: #000;
}
.one-px {
height: 1px;
}
.half-px {
height: 1px;
background: none;
box-shadow: 0 0.5px 0 #000;
}
谷歌:
火狐0.5px的线没有显示