移动端页面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縮小一倍。再用定位定到正確的位置即可
轉載于:https://www.cnblogs.com/raoyunxiao/p/4241982.html
總結
以上是生活随笔為你收集整理的移动端页面0.5px border的实现的全部內容，希望文章能夠幫你解決所遇到的問題。
