移动端适配retina屏，如何实现1px边框圆角？

Question

给个具体思路， 谢谢。

Answer 1

在vux的源码中发现的解决方案， 用伪元素实现感觉是最好得方法， 因为对元素直接scale依然会占据空间,影响后续布局。

.box {
  overflow: hidden;
  display: inline-block;
  width: 100px;
  height: 100px;
}

.box:before {
  z-index: -1;
  content:'';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background: #eee;
  transform-origin: 0 0; 
  transform: scale(.5,.5);
  border: 1px solid #000;
  border-radius: 10px;
}

Answer 2

2px缩放0.5倍

Answer 3

可以用css scale 属性

Answer 4

1px是有很多办法的，缩小0.5，伪类+transform我觉得是最方便的解决方案。
不需要动态的脚本去计算什么的。

.hairlines li{
    position: relative;
    border:none;
}
.hairlines li:after{
    content: '';
    position: absolute;
    left: 0;
    background: #000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
}

原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位

Answer 5

这个问题我也遇到过，你可以看看这篇文章，基本能解决问题
移动端1px细线解决方案总结

Answer 6

    border-radius: 5px;
    box-shadow: 0 0 1px 0 #a09e9e;
    
    亲测~~