css 移动端1px的解决方案

最新推荐文章于 2024-07-05 17:35:21 发布

京都玩家

最新推荐文章于 2024-07-05 17:35:21 发布

阅读量2.3k

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/hzaini89/article/details/73607495

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

.wi-cell {
    position: relative;
}
.wi-cell:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #e5e5e5;
    color: #e5e5e5;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    left: 15px;
}

原理：父级设置相对定位，通过伪类来给父级添加子元素设置相对于父级的绝对定位，设置其高为一个像素，然后设置上边框也为一个像素，最后通过 CSS3 的 transform 属性把伪元素缩放为原来的一半大小。