首页 > 代码库 > 移动端页面0.5px border的实现
移动端页面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.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缩小一倍。再用定位定到正确的位置即可
移动端页面0.5px border的实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。