android上实现0.5px线条

浅夏晴空

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .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;
        }
    </style>
</head>
<body>
    <div class="div"></div>
</body>
</html>Copy to clipboardErrorCopied

效果展示:

img

阅读 864

大前端技术栈
大前端技术汇总
avatar
浅夏晴空
前端开发工程师

基于大前端端技术的一些探索反思总结及讨论

4.6k 声望
3.5k 粉丝
0 条评论
你知道吗?

avatar
浅夏晴空
前端开发工程师

基于大前端端技术的一些探索反思总结及讨论

4.6k 声望
3.5k 粉丝
宣传栏