HTML 移动端,给元素添加0.5px的边框

    在浏览器端1px线看起来的确很细,但一旦放在手机上,就显得很粗,原因如下:

   

在移动端，1px 的直线在物理屏幕上通常会显示成 2px（甚至更粗）。这是因为手机屏幕的物理分辨率（硬件支持的）通常是其逻辑分辨率（软件支持的）的数倍。

以 iPhone 6 为例，其逻辑分辨率为 667×375 ，物理分辨率为 1334x750 。这意味着物理屏幕使用 2x2 个像素点显示 1 像素的内容。换言之，如果我们希望在物理屏幕上显示 1 像素的边框，就必须在逻辑上实现 0.5 像素的边框。

除了 iPhone（iOS8以上），目前绝大多数的移动设备并不支持直接渲染 0.5px 的边框。

1
2
/* 兼容性差 */
border: 0.5px solid #e6e6e6;
事实上，存在不止一种方法用于在移动端实现 0.5px 的细边框。思路基本上还是先渲染 1px 边框，然后设法将线条的宽度减少或隐藏 50% 。下面推荐两种我在移动端 Web 和小程序中常用、兼容性较优的方法。

造成边框变粗的原因

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

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

   找了好几个,这个方法是最好的:-webkit-box-shadow:inset 0px -1px 1px -1px #c8c7cc

 

.price_table_content>td
{
	color:#313131;
	font-size: 16px;
	font-weight:400;
	text-align: right;
	/*border-bottom:#9A9A9A 1px solid; */
	-webkit-box-shadow:inset 0px -1px 1px -1px #c8c7cc;//这个加上就可以实现移动设备上的细线
	
	padding:9px;
	padding-left: 12px;
	height: 32px;
}

    参考链接:https://jinlong.github.io/2015/05/24/css-retina-hairlines/,https://juejin.im/entry/584e427361ff4b006cd22c7c