的边框在移动端，有时候1px的边框会显得很粗，不美观。淘宝和京东的触摸屏在移动设备上使用浅而细的线条显示。具体实现方法如下：普通1px黑色实线边框：border:1pxsolid#000;当然，半像素边框不是简单的把1px改成0.5px（会解析成1px），border-width的值只能是自然数，同理，outline、box-shadow等也没有画一条0.5px的细线的方法。常规的想法是行不通的。我们可以使用伪元素+缩放来巧妙地实现。具体步骤如下：将目标元素设置为定位参考。thinner-border{position:relative;/*只要不是默认值static*/}在目标元素之前或之后添加一个伪元素，并设置绝对定位。thinner-border:before{content:'';位置：绝对；}给伪元素边框添加一个1px的边框：1pxsolidred；设置伪元素的宽度和高度为目标元素宽度的两倍：200%；高度：200%；缩小0.5倍（返回目标元素的大小）transform-origin:00;变换：比例（0.5，0.5）；将边框包裹在box-sizing:border-box;总之，先放大再缩小，border-box是关键，不然border不会缩放到一起2.具体上面的实现已经一步步写清楚了，放在一起就是一个完整的实现：.thinner-边框{位置：相对；}.thinner-border:before{内容：'';位置：绝对；宽度：200%；高度：200%；边框：1px实心#000；-webkit-transform-origin:00;-moz-transform-origin:00;-ms-transform-origin:00;-o-变换原点：00；变换原点：00；-webkit-transform:scale(0.5,0.5);-ms-转换：规模（0.5，0.5）；-o-变换：比例（0.5，0.5）；变换：比例（0.5，0.5）；-webkit-box-sizing：边框框；-moz-box-sizing：边框框；box-sizing:border-box;}的作用是给class值指定thinner-border的block和inline-block元素添加半像素边框，因为inline元素的宽高有一些限制，并且伪元素比实际值小200%，边框的宽高会比预期的小
