移动端1px细线解决方案--利用transform缩放方式

时间：2018-10-12 21:14:06 阅读：204 评论：0 收藏：0 [点我收藏+]

移动端1px会显示为2px;

解决方式很多，这里介绍比较常用的一种方式--css的transform属性缩放

1. 上边框相当于 border-top

<div class="bordert1px"></div>

css

/*top*/
.bordert1px {
    position: relative;
}
.bordert1px:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: #d8d8d8;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5); 
    transform: scaleY(0.5); // 纵向缩放
}

细线--直接缩放就好了

<hr />

css

hr{background: #d8d8d8;width:1px;height:1rem;border:none;transform: scaleX(0.5);margin: 0;}

移动端1px细线解决方案--利用transform缩放方式

标签：for ati webkit 比较 idt 常用解决方案 orm ack

原文地址：https://www.cnblogs.com/leiting/p/9780129.html

踩

(0)

评论一句话评论（0）