移动端页面0.5px border的实现

时间：2021-12-06 08:59:50

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

代码如下：

 <!doctype html>

 <html lang="en">

 <head>

  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

  <meta charset="UTF-8">

  <title>0.5 border</title>

  <style type="text/css">

  *{margin: 0;padding: 0;-webkit-box-sizing:border-box;}

  ul{

   position: relative;

  }

  li{

   height: 60px;

   line-height: 60px;

   padding-left: 10px;

   position: relative;

   font-size: 20px;

  }

  li:after{

   content: "";

   display: block;

   position: absolute;

   left: -50%;

   width: 200%;

   height: 1px;

   background: #ededed;

   -webkit-transform:scale(0.5);

  }

  </style>

 </head>

 <body>

  <ul>

   <li>list-item1</li>

   <li>list-item2</li>

   <li>list-item3</li>

   <li>list-item4</li>

   <li>list-item5</li>

   <li>list-item6</li>

   <li>list-item7</li>

   <li>list-item8</li>

  </ul>

 </body>

 </html>

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

相关文章