面试必问：Retina屏幕的1像素，如何实现圆角？

这个问题通常用于考察你是否做过移动端H5的项目

如果你能知道这个问题，并且答出来，清晰的知道前因后果，证明你有过h5开发经验

否则就说明你没有h5的任何经验，尤其是你都不知道这个事情，那就更说明这一点。

普通的1px

如果仅使用css的1px来设置border，那可能会出现比较粗的情况。

因为有些手机屏幕的DPR=2,即1px它会用两个物理像素来显示，就比较粗了。

#box{
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

上面是微信app的border，下面的1px的border，有明显的区别，显得很粗糙，设计师也不会允许这样的页面发布上线。

ps:你不能直接写0.5px,浏览器的兼容性不好，渲染出来可能还是1px的效果。

使用transform缩小

我们可以使用css伪类+transform来优化这一问题，把默认的1px宽度给压缩0.5倍。

#box{
    padding: 10px 0;
    position: relative;
}
#box::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #d9d9d9;
    transform: scaleY(0.5);
    transform-origin: 0 0;
}

这个是调整之后的效果，两者的粗细保持一致了。

连环问：如果有border-radius怎么办？

可以使用box-shadow设置

• X偏移量0
• Y偏移量0
• 阴影模糊半径0
• 阴影扩散半径0.5px
• 阴影颜色

#box{
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 0 0.5px #d9d9d9;
}

欢迎大家有问题随时沟通~~~~~~~