码迷,mamicode.com
首页 > 移动开发 > 详细

box-shadow实现移动端(Retina屏)超细边框

时间:2017-08-04 20:37:14      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:官方   解决   pre   设备   window   png   alt   http   img   

// box-shadow投影方向
//
box-shadow:  inset 0px 1px 0px 0px #000; 
//
box-shadow:  inset -1px 0px 0px 0px #000;
//
box-shadow:  inset 0px -1px 0px 0px #000;
//
box-shadow:  inset 1px 0px 0px 0px #000;

效果如下:

技术分享

技术分享

技术分享

技术分享

  因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度。  

  在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比。

devicePixelRatio的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素。

  多更解决方法参阅:http://www.jianshu.com/p/7e63f5a32636

box-shadow实现移动端(Retina屏)超细边框

标签:官方   解决   pre   设备   window   png   alt   http   img   

原文地址:http://www.cnblogs.com/hcxwd/p/7286862.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!