由于手机的高分辨率，移动端的项目很多时候需要对其1px的边框做特殊处理。以下列出两种实现方法：
方法1：利用缩放原理实现。
<body> <div class="box my_border"></div> </body>
.my_border{ position:relative; } .my_border:after{ content:""; position:absolute; left: 0; top:0; right:-100%; bottom:-100%; -webkit-transform:scale(0.5); -webkit-transform-origin:0px 0px; border:1px #333 solid; }
-100%不能换成200%，否则会多出2px.
此方法的实现思路：先用伪元素给div加上一个border边框，让它上下左右拉伸一倍，再通过scale(0.5)缩小一倍，再重新定位到（0px 0px）的地方。若只需要下边框，可以把border:1px soild #333改为
border-bottom:1px #333 solid;
一般情况下推荐用方法1，但特殊情况如实在不支持伪元素时，可用方法2。
方法2：用border-image方法实现。
需要准备长宽都为10px的正方形矩形图。如图
l 利用border-image属性，把图片切成距离上下左右各2像素的小图
l准备的小图如果是实线图(border_image_solid),线的厚度将包含1px的实线和1px的空白透明
l准备的小图如果是虚线图(border_image_dash), 线的厚度将包含1px的实线和1px的空白透明
l 最后运用border-1px，则1px的实线=0.5px,1px的空白透明=0.5px。在手机高清屏幕上是x2的，0.5x2=1px即可实现移动端的一像素效果。
补充：border- 0 0 1px 0; 遵循上右下左的顺序，表示只有下面才有线。使用border-image和border-width组合，可以很方便的控制线条的显示。
代码示例：
4条边框示例：
<div class="border_all"></div>
.border_all{ border-style: solid; -webkit-border-image:url(../image/border_image_solid.png) 2 repeat; border-width: 1px; }
只要1条下边框示例：
<div class="bor_bottom"></div>
.bor_bottom{ margin-top: 10px; border-style: solid; -webkit-border-image: url(../image/border_image_solid.png) 2 repeat; border-width:0 0 1px 0; }