android上实现0.5px线条

转：

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 rgba(0, 255, 255, 1); posititon: relative }
.div::after { content: ""; position: absolute; left: 0; bottom: 0; box-sizing: border-box; width: 200%; height: 1px; transform: scale(0.5); transform-origin: left top; pointer-events: none; background-color: rgba(0, 255, 255, 1) }


Copy to clipboardErrorCopied

效果展示：

转：

android上实现0.5px线条