Fe-interview: [css] 第105天 怎么实现移动端的边框0.5px？

[haizhilin2013]

第105天 怎么实现移动端的边框0.5px？

[LinStan]

一种是通过transform中的scale

    border: 1px solid red;
    transform: scaleY(.5);

一种是通过meta viewport中设置init-scale为0.5
<meta name="viewport" content="width=device-width, initial-scale=0.5">
一种是设置hr

    border: 0px;
    border-bottom: 1px solid red;

一种是基于背景渐变实现

    height: 2px;
    background-image: linear-gradient(0deg, red 50%, transparent 50%)

[EragonBubble]

1.伪类:after + 缩放

li:after {
            content: "";
            display: block;
            position: absolute;
            left: -50%;
            width: 200%;
            height: 1px;
            background: red;
            transform: scale(0.5);
            -webkit-transform: scale(0.5);
        }

1. 背景渐变，一半颜色，一半透明

  .bg-half {
            height: 1px;
            background-image: linear-gradient(0deg, red 50%, transparent 50%);
        }

[yangyingwx]

.border { border: 0.5px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.25px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.166667px solid #999 }
}

[ferrinweb]

border: thin solid #e2e2e2;