移动端真实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的正方形矩形图。如图
l 利用border-image属性,把图片切成距离上下左右各2像素的小图
l准备的小图如果是实线图(border_image_solid),线的厚度将包含1px的实线和1px的空白透明
l准备的小图如果是虚线图(border_image_dash), 线的厚度将包含1px的实线和1px的空白透明
l 最后运用border-width:1px,则1px的实线=0.5px,1px的空白透明=0.5px。在手机高清屏幕上是x2的,0.5x2=1px即可实现移动端的一像素效果。
补充:border-width: 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; }