我们在工作的时候可能会遇到移动web触屏开发,一开始移动设备上的显示线条都是显示1个像素的线条,但是我们发现这样并不美观,那么你知道Web前端如何绘制0.5像素吗?下面我们就去看看Web前端绘制0.5像素的方法。
以下纪录了比较方便的4种绘制0.5像素线条方式
一、采用meta viewport的方式,这个也是淘宝触屏采用的方式
常用的移动html viewport的设置如下
具体意思就不多提,它就是让页面的高宽度即为设备的高宽像素,而为了方便绘制0.5像素的viewport的设置如下
这样html的宽高就是设备的2倍,此时依然使用css board为1像素的话,肉眼看到页面线条就相当于transform:scale(0.5)的效果,即为0.5像素
但是这种方式涉及到页面整体布局规划以及图片大小的制作,所以若采用这个方式还是事先确定为好
二、采用 border-image的方式
这个其实就比较简单了,直接制作一个0.5像素的线条和其搭配使用的背景色的图片即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<meta charset="
"utf-8" >
<meta name="
"viewport" content= "initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
boardTest
p{
margin : 50px auto ;
padding : 5px 10px 5px 10px ;
color : red ;
text-align : center ;
width : 60px ;
}
p:first-child{
border-bottom : 1px solid red ;
}
p:last-child{
border-width : 0 0 1px 0 ; border-image: url ( "img/line_h.gif" ) 2 0 round;
}
|
三、采用background-image的方式
我这里采用的是渐变色linear-gradient的方式,代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<meta charset="
"utf-8" >
<meta name="
"viewport" content= "initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
boardTest
p{
margin : 50px auto ;
padding : 5px 10px 5px 10px ;
color : red ;
text-align : center ;
width : 60px ;
}
p:first-child{
border-bottom : 1px solid red ;
}
p:last-child{
background-image : -webkit-linear-gradient( bottom , red 50% , transparent 50% );
background-image : linear-gradient( bottom , red 50% , transparent 50% );
background- size : 100% 1px ;
background-repeat : no-repeat ;
background-position : bottom right ;
|
linear-gradient(bottom,red 50%,transparent 50%);的意思是从底部绘制一个渐变色,颜色为红色,占比为50%,而总宽度已经设置为100%而总高度为一个像素background-size: 100% 1px;
这样显示出来就是0.5像素的线条
四、采用transform: scale()的方式
就是将绘制出来的线条的高度进行半倍的缩放,代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<meta charset="
"utf-8" >
<meta name="
"viewport" content= "initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
boardTest
p{
margin : 50px auto ;
padding : 5px 10px 5px 10px ;
color : red ;
text-align : center ;
width : 60px ;
}
p:first-child{
border-bottom : 1px solid red ;
}
p:last-child{
position : relative ;
}
p:last-child:after {
position : absolute ;
content : '' ;
width : 100% ;
left : 0 ;
bottom : 0 ;
height : 1px ;
background-color : red ;
-webkit-transform: scale( 1 , 0.5 );
transform: scale( 1 , 0.5 );
-webkit-transform-origin: center bottom ;
transform-origin: center bottom
}
|
以上就是小编为大家整理出来的Web前端绘制0.5像素的方法,我们可以通过采用meta viewport、border-image、background-image和transform: scale()的方式实现。