android上实现0.5px线条

Bertha 。 2023-01-03 04:15 132阅读 0赞

由于安卓手机无法识别`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][]

[img]: /images/20221119/e3417be3ab234925a959943ea2d92526.png

发表评论取消回复

表情：

评论列表（有 0 条评论，132人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android官方dip值到pix值转换：dip2pix，dip2px，dp2px实现

Android官方的dip to pix，dip2pix，dp2px实现网上流传的一个常用的把dip值转换为pix像素值的方法通常是这样的： public

傷城~/ 2023年10月17日 21:44/ 0 赞/ 9 阅读

相关 bpmn-js（五）线条上添加决策表达式

bpmn-js确实强大，但资料也确实太少。可能也只有作者知道咋玩，为了给线条加上表达式这么个功能生生的看了2天源码才搞定。 const moddle = windo

淡淡的烟草味﹌/ 2023年01月17日 04:43/ 0 赞/ 252 阅读

相关 android上实现0.5px线条

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

Bertha 。/ 2023年01月03日 04:15/ 0 赞/ 133 阅读

相关 Android px和dp换算公式

一、基础概念 px ：其实就是像素单位，比如我们通常说的手机分辨列表800\400都是px的单位 sp ：同dp相似，还会根据用户的字体大小偏好来缩放

待我称王封你为后i/ 2022年09月01日 13:51/ 0 赞/ 245 阅读

相关 Android-05-HelloWorld

![SouthEast][] [SouthEast]: /images/20220823/191826a742be499bb3170b650a349dee.png

﹏ヽ暗。殇╰゛Y/ 2022年08月24日 04:20/ 0 赞/ 140 阅读

相关 Android中在UI中加入线条

UI中加入线条竖线 <View android:layout_width="1dip" android:layout_height="match_par

￡神魔★判官ぃ/ 2022年08月18日 00:41/ 0 赞/ 199 阅读

相关 android Px与Dp互转换

/ dp转px / private int dpTopx(Context context, float dp){

Bertha 。/ 2022年07月14日 10:12/ 0 赞/ 214 阅读

相关 android dp，sp转为px

private int dp2px(int value){ return (int) TypedValue.applyDimension(Typ

小鱼儿/ 2022年07月14日 07:13/ 0 赞/ 185 阅读

相关做出比1px还细的线条

案例图片如下 ![70][] 代码： <div style="width:300px;border-top: 1px solid CCCCCC;trans

Bertha 。/ 2022年05月25日 05:56/ 0 赞/ 99 阅读

相关 android 上dip dp px sp等单位说明

文章目录 px in mm dot dpi ppi dp/dip px

旧城等待，/ 2022年03月10日 08:10/ 0 赞/ 242 阅读