android 模糊线条,android上实现0.5px线条的原理分析

由于安卓手机无法识别border: 0.5px，因此我们要用0.5px的话必须要借助css3中的-webkit-transform:scale缩放来实现。

原理：将伪元素的宽设为200%，height设为1px通过-webkit-transform:scale(.5)来进行缩小一倍，这样就得到border为0.5的边框

Document

.div{

width: 100%;

height: 100px;

border-top: 1px solid aqua;

posititon:relative;

}

.div::after{

content: '';

position: absolute;

left: 0;

bottom: 0;

box-sizing: border-box;

width: 200%;

height: 1px;

transform: scale(.5);

transform-origin: 0 0;

pointer-events: none;

background-color: aqua;

}

效果展示：

到此这篇关于android上实现0.5px线条的原理分析的文章就介绍到这了,更多相关android实现0.5px线条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！