Retina屏下的1px边框的实现
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Retina屏下的1px边框的实现</title> 6 <style type="text/css"> 7 div{ 8 margin: 10px 0; 9 } 10 .line-top,.line-bottom,.line-top-bot{ 11 position: relative; 12 } 13 .line-top:after{ 14 content: ""; 15 position: absolute; 16 left: 0; 17 top: 0; 18 width: 100%; 19 height: 1px; 20 z-index: 1; 21 background-image:linear-gradient(180deg, #ccc, #ccc 50%, #fff 50%); 22 background-size: 100% 1px; 23 background-repeat: no-repeat; 24 background-position: bottom; 25 } 26 .line-bottom:after{ 27 content: ""; 28 position: absolute; 29 left: 0; 30 bottom: 0; 31 width: 100%; 32 height: 1px; 33 z-index: 1; 34 background-image:linear-gradient(180deg, #f00, #f00 50%, #fff 50%); 35 background-size: 100% 1px; 36 background-repeat: no-repeat; 37 background-position: bottom; 38 } 39 .line-top-bot:before{ 40 content: ""; 41 position: absolute; 42 left: 0; 43 top: 0; 44 width: 100%; 45 height: 1px; 46 z-index: 1; 47 background-image:linear-gradient(180deg, #ccc, #ccc 50%, #fff 50%); 48 background-size: 100% 1px; 49 background-repeat: no-repeat; 50 background-position: top; 51 } 52 .line-top-bot:after{ 53 content: ""; 54 position: absolute; 55 left: 0; 56 bottom: 0; 57 width: 100%; 58 height: 1px; 59 z-index: 1; 60 background-image:linear-gradient(180deg, #f00, #f00 50%, #fff 50%); 61 background-size: 100% 1px; 62 background-repeat: no-repeat; 63 background-position: bottom; 64 } 65 </style> 66 </head> 67 <body> 68 <div class="line-top">上面的边框</div> 69 <div class="line-bottom">下面的边框</div> 70 <div class="line-top-bot">上下边框</div> 71 </body> 72 </html>