移动端页面0.5px border的实现

最新推荐文章于 2023-06-25 10:42:29 发布

weixin_30240349

最新推荐文章于 2023-06-25 10:42:29 发布

阅读量71

点赞数

原文链接：http://www.cnblogs.com/raoyunxiao/p/4241982.html

版权

移动端上经常发现1px边框异常的粗，因此，决定用伪类配合css3来实现0.5px边框

代码如下：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
 5  <meta charset="UTF-8">
 6  <title>0.5 border</title>
 7  <style type="text/css">
 8  *{margin: 0;padding: 0;-webkit-box-sizing:border-box;}
 9  ul{
10   position: relative;
11  }
12  li{
13   height: 60px;
14   line-height: 60px;
15   padding-left: 10px;
16   position: relative;
17   font-size: 20px;
18  }
19  li:after{
20   content: "";
21   display: block;
22   position: absolute;
23   left: -50%;
24   width: 200%;
25   height: 1px;
26   background: #ededed;
27   -webkit-transform:scale(0.5);
28  }
29  </style>
30 </head>
31 <body>
32  <ul>
33   <li>list-item1</li>
34   <li>list-item2</li>
35   <li>list-item3</li>
36   <li>list-item4</li>
37   <li>list-item5</li>
38   <li>list-item6</li>
39   <li>list-item7</li>
40   <li>list-item8</li>
41  </ul>
42 </body>
43 </html>

主要思路是利用伪类来实现border，先放大一倍，再利用css3缩小一倍。再用定位定到正确的位置即可

转载于:https://www.cnblogs.com/raoyunxiao/p/4241982.html

weixin_30240349

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端页面0.5px border的实现

移动端上经常发现1px边框异常的粗，因此，决定用伪类配合css3来实现0.5px边框代码如下： 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1....
复制链接

扫一扫