纯css设置border-width

最新推荐文章于 2025-05-22 09:48:36 发布

原创最新推荐文章于 2025-05-22 09:48:36 发布 · 935 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #伪类 #border0.5px

原创专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一种使用CSS技巧在各种设备上（包括不支持小数宽度的安卓设备）实现精确0.5px边框的方法。通过在伪元素中应用transform的scale属性，可以确保边框在不同屏幕上的显示效果一致且细腻。

常见的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不需要下划线，效果图如下：

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