设置border线条小于1px

最新推荐文章于 2025-06-14 11:14:06 发布

原创最新推荐文章于 2025-06-14 11:14:06 发布 · 8.1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css #border #小于1px

css样式专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在Android系统上实现细边框的方法，通过使用伪元素并结合transform属性，可以使边框看起来更细腻。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

正常来说,border的最小宽度为1px,这种情况对于移动端来说是一个很大的问题,因为1px在手机显示确实显得有点粗;对于iOS系统它支持浮点数,可以使用rpx作为单位,可设置为1rpx,相当于0.5px,而安卓就不行了,下面说一下安卓设置细下边框

对于安卓需要使用到伪元素,只需要把该伪元素添加到你想要的元素中就可以了,比如:

<div class="text">
    hello world!
</div>

.text{
    position:relative;
}
.text:after{
    content: " ";
    position: absolute;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    left: 0;
    z-index: 2;
}

这样就可以让div的下边框看起来很细了

注意:text一定要加position属性