移动web 1像素边框

最新推荐文章于 2023-09-06 13:50:03 发布

o圈儿o

最新推荐文章于 2023-09-06 13:50:03 发布

阅读量314

点赞数

transform: scale(0.5) 实现

1px缩放都0.5px的状态下，而0.5px并不是所有都支持，再根据媒体查询设置不同的缩放比例就可以了，那么我们就开始玩儿缩放吧。

1.用height：1px的div，然后根据媒体查询设置transform: scaleY(0.5);，

div{
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
}

2.用::after和::befor,设置border-bottom：1px solid #000,然后在缩放-webkit-transform: scaleY(0.5);可以实现两根边线的需求

div::after{
    content:'';width:100%;
    border-bottom:1px solid #000;
    transform: scaleY(0.5);}

3.用::after设置border：1px solid #000; width:200%; height:200%,然后再缩放scaleY(0.5); 优点可以实现圆角，京东就是这么实现的，缺点是按钮添加active比较麻烦。

.div::after {
    content: '';
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    -webkit-transform: scale(0.5,0.5);
    transform: scale(0.5,0.5);
    -webkit-transform-origin: top left;
}