移动端1px边框实现方案

原创 ljz1490614196 随笔 移动端 274阅读 2017-11-27 11:51:29 举报

最近碰到移动端1px边框问题,网上找了些办法,记录下:
注:资料出处不记得了,sorry
1.使用border-image属性实现物理1px
通常手机端的页面设计稿都是放大一倍的,如:为适应iphone retina,设计稿会设计成640*960的分辨率,图片按照2倍大小切出来,在手机端看着就不会虚化,非常清晰。

同样,在使用border-image时,将border设计为物理1px,如下:

1.jpg
样式设置:
css 代码

border.png也可以直接使用的base64替代:
css 代码

2.使用 CSS3 transform 实现
css 代码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复