您的位置:首页 > 移动开发

移动端实现1px的边框

2017-11-01 11:10 330 查看
众所周知,在移动端1px比实际的1px的要粗,那么怎么才能在移动端实现1px的边框啦??

看到这里,不知道有没有童鞋想到css3的一个属性,缩放  ,没错,就是缩放 !!

还有一个重要那就是伪元素::after

主要是css代码如下:

.border::after{

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  border: 1px solid #fff;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  width: 200%;

  height: 200%;

  -webkit-transform: scale(0.5);

  transform: scale(0.5);

  -webkit-transform-origin: left top;

  transform-origin: left top;

}

有疑问,请下方留言!!!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  移动 css3 移动端1px