标签：webkit 对象 position sel color play 选择 abs ret
1、边框粗细原因
在移动端下设置border为1px，在某些设备上看比1px粗。
这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。
devicePixelRatio的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。
2、解决办法
a、使用border-image实现
根据需求选择图片，然后根据css的border-image属性设置。代码如下
div
{
-moz-border-image:url(/i/border.png) 30 30 stretch; /* Old Firefox */
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;
}
优点：可以设置单条、多条表框。缺点：更换颜色和样式麻烦，某些设备上会模糊。b、使用background-image实现
background-image 跟border-image的方法一样，你要先准备一张符合你要求的图片。优缺点与border-image一样。
c、使用box-shadow模拟边框
代码如下
.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}
优点：代码少，兼容性好。缺点：边框有阴影，颜色变浅。
.border-1px{
position: relative;
margin-bottom: 20px;
border:none;
}
.border-1px:after{标签：webkit 对象 position sel color play 选择 abs ret
原文地址：http://www.cnblogs.com/wangdan0915/p/7527676.html
