奇怪的高清屏1px边框的问题解决方案（偷懒）

[lishengzxc]

移动端高清屏的1px边框问题的解决方案很多，比较成熟的是用阿里无线的 https://github.com/amfe/lib-flexible 方案，它会去动态设置viewport的initial-scale，所以在遇到边框的时候，我们就不需要做各种的 hack 来解决（比如伪元素，border-image）。

但是，我如果是一个比较老的项目，当时在开发的时候，并没有引入lib-flexible，同时设计师，和产品经理都对你还原的页面吐槽不断，怎么办？我不可能重新这个是时候引入并使用lib-flexible，同时我对 hack 方案一直都比较反对。

终于我想到一个简单的方案，同样还是1px的单位，然后是两个选择：

• 边框的颜色，我并不根据设计稿来还原，而是选择比设计稿更浅的颜色
• 边框的颜色根据设计稿还原，加上透明度，0.1 或者 0.2 注意边框线的颜色要使用rgba的话，需要加上background-clip: padding-box;

好了，现在终于让产品和设计师满意了。

附：http://www.w3school.com.cn/cssref/pr_background-clip.asp

[rccoder]

这个强势！