纯css设置border-width

     常见的border设置一般都是直接类似1px solid #eee,但是在移动端上会发现这个1px的border显得很粗,如果直接设置0.5px的话,在ios里面的显示到还正常,不过有些安卓机不支持浮点数的的样式设置,这个时候就需要统一处理的,话不多说直接上代码吧,纯css设置border-width为0.5px,css代码如下:

      .input-wrap {
        position: relative;
      }
      .input-wrap::after{
        content: '';
        display: block;
        position:absolute;
        left: -50%; 
        bottom: 0;
        width: 200%;
        height: 1px;
        background: #ccc;
        transform:scale(0.5);
      }
      .jzt-form-item:last-child .input-wrap::after{
        height:0px;
      }

在伪类中用transform的scale进行缩放到一半,然后绝对定位到底部,同时最后一个input不需要下划线,效果图如下:

纯css设置border-width_第1张图片可以看到在调试模式下的安卓里也是显示0.5px的下划线了,真机测试也有效,而且如果还是觉得粗了的话,那就继续缩放比例,注意伪类里的width和缩放比例相乘刚好等于100%并且改变left的大小使下划线保持在正中间就行了。

你可能感兴趣的:(原创,css,伪类,border0.5px)