在Reina（视网膜）屏幕的手机上使用CSS设置的1px的边框实际会比视觉稿粗很多。在之前的项目中UI告诉我说我们移动项目中的边框全部都变粗了，UI把他的设计稿跟我的屏幕截图跟我看居然真的不一样。没有办法只有在后面的版本中去修改了，但是要改的话需要知道是为什么。所以查了很多资料终于搞懂了这个问题，并且总结了几种方法

其实这个原因很简单，因为css中的1px并不等于移动设备的1px这些由于不同的手机有不同的像素密度。茬window对象中有一个devicePixelRatio属性他可以反应css中的像素与设备的像素比。

解决边框变粗的6种办法

额的神呐！so easy! 果真如此吗
这样还不够（WWDC幻灯片通常是“唬人”的），但是相差不多
问题是 retina 屏的浏览器可能不认识0.5px的边框，将会把它解释成0px没有边框。包括 iOS 7 和之前版本OS X Mavericks 及以前版本，还有 Android 設备

解决方案是通过 JavaScript 检测浏览器能否处理0.5px的边框，如果可以给html标签元素添加个class。

然后极细的边框样式就容易了：

• 简单，不需要过多玳码

• 无法兼容安卓设备、 iOS 8 以下设备。

上文是把border设置在边框的底部所以使用的图片是2px高，上部的1px颜色为透明下部的1px使用视觉规定的border的顏色。如果边框底部和顶部同时需要border可以使用下面的border-image：

到目前为止，我们已经能在iphone上展现1px border的效果了但是我们发现这样的方法在非视网膜屏上会出现border显示不出来的现象，于是使用Media Query做了一些兼容样式设置如下：

• 可以设置单条,多条边框

• 修改颜色麻烦, 需要替换图片
• 圆角需要特殊处理，并且边缘会模糊

background-image 跟border-image的方法一样你要先准备一张符合你要求的图片。然后将边框模拟在背景上

• 可以设置单条,多条边框

• 修改颜色麻烦, 需要替换图片
• 圆角需要特殊处理，并且边缘会模糊

与background-image方案类似只是将图片替换为css3渐变。设置1px的渐变背景50%有颜色，50%透明

• 可以实现單条、多条边框

• 多背景图片有兼容性问题

利用css 对阴影处理的方式实现0.5px的效果

这种兼容方案相对比较完美，适合新的项目老的项目修改成夲过大。
对于这种方案可以看看

• 一套代码，可以兼容基本所有布局

• 老项目修改代价过大只适用于新项目

对于老项目，有没有什么办法能兼容1px的尴尬问题了个人认为伪类+transform是比较完美的方法了。
单条border样式设置：

最好在使用前也判断一下结合 JS 代码，判断是否 Retina 屏：

1. 首先输入项目名按下回车将自動生成如图后缀
   
2. 在样本区域内导入第一步收集到的样本
3. 网络部分会根据导入的样本自动配置，打包样本即可如下图：
   
4. 打包完成点击 【开始训练】即可，如下图：
   
5. 如图所示已经开始训练

# 第三步： 调用（识别普通OCR） # 第三步： 调用（识别验证码）

喜欢的各位可以加QQ群：