iOS7已经发布有一段时间，扁平化设计风格有很多值得称赞的地方，其中有很多设计细节都是值得研究的。
首先，来看下面iOS设置的截图中的border：
从上面的截图可以看到iOS7的设计是非常精细的，border是一根非常细的线。这篇文章将说明如何使用border-image实现iOS7的border效果。
在看下面的内容之前，需要先了解devicePixelRatio和border-image，不熟悉的同学请自行脑补：
设备像素比devicePixelRatio简单介绍CSSborder-image详解、应用及jQuery插件border属性实现效果我们在实现border时通常都是使用border属性，如下：
.border-1px{border-width:1px0;border-style:solid;border-color:#;}
显示效果对比：
上面这张图片可以看到，在手机上border无法达到我们想要的效果。这是因为devicePixelRatio特性导致，iPhone的devicePixelRatio==，而border-width:1px描述的是设备独立像素，所以，border被放大到物理像素px显示，在iPhone上就显得较粗。
使用border-image属性实现物理1px通常手机端的页面设计稿都是放大一倍的，如：为适应iphonetina，设计稿会设计成*的分辨率，图片按照倍大小切出来，在手机端看着就不会虚化，非常清晰。
同样，在使用border-image时，将border设计为物理1px，如下：
样式设置：
.border-image-1px{border-width:1px0px;-webkit-border-image:url("border.png")0sttch;border-image:url("border.png")0sttch;}
显示效果对比：
这里在手机上的效果和iOS7已经非常接近了。
样例：