移动端真实1px的实现方法

由于手机的高分辨率，移动端的项目很多时候需要对其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的正方形矩形图。如图

移动端真实1px的实现方法

l 利用border-image属性，把图片切成距离上下左右各2像素的小图

l准备的小图如果是实线图(border_image_solid),线的厚度将包含1px的实线和1px的空白透明

移动端真实1px的实现方法

l准备的小图如果是虚线图(border_image_dash), 线的厚度将包含1px的实线和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;
}

移动端真实1px的实现方法

相关推荐