Description

haizhilin2013

opened on Jul 29, 2019

Issue body actions

第105天 怎么实现移动端的边框0.5px？

Activity

1. haizhilin2013

   added

   csscsscss

   on Jul 29, 2019
2. LinStan commented on Jul 30, 2019

   

   LinStan

   on Jul 30, 2019

   More actions

   一种是通过transform中的scale

       border: 1px solid red;
       transform: scaleY(.5);
   

   一种是通过meta viewport中设置init-scale为0.5
   <meta name="viewport" content="width=device-width, initial-scale=0.5">
   一种是设置hr

       border: 0px;
       border-bottom: 1px solid red;
   

   一种是基于背景渐变实现

       height: 2px;
       background-image: linear-gradient(0deg, red 50%, transparent 50%)
   

   Reacted by XueFeng, tiyunchen, lilng, quanhuan2011, Wayne law, Cole Sakurai, Lucenova, Canwdev, jamsehua, d4c-27 and 1 more

   Reacted by XiangAo
3. EragonBubble commented on Aug 1, 2019

   

   EragonBubble

   on Aug 1, 2019

   More actions

   1.伪类:after + 缩放

   li:after {
   			content: "";
   			display: block;
   			position: absolute;
   			left: -50%;
   			width: 200%;
   			height: 1px;
   			background: red;
   			transform: scale(0.5);
   			-webkit-transform: scale(0.5);
   		}
   

   2. 背景渐变，一半颜色，一半透明

     .bg-half {
   			height: 1px;
   			background-image: linear-gradient(0deg, red 50%, transparent 50%);
   		}
   

   Reacted by sean and yangyingwx
4. yangyingwx commented on Nov 21, 2020

   

   yangyingwx

   on Nov 21, 2020

   More actions

   .border { border: 0.5px solid #999 }
   @media screen and (-webkit-min-device-pixel-ratio: 2) {
       .border { border: 0.25px solid #999 }
   }
   @media screen and (-webkit-min-device-pixel-ratio: 3) {
       .border { border: 0.166667px solid #999 }
   }
   
5. ferrinweb commented on Nov 23, 2020

   

   ferrinweb

   on Nov 23, 2020

   More actions

   border: thin solid #e2e2e2;

   Reacted by bohan

Issue actions