[半转]1px边框 移动端
半转的意思是借鉴参考，搬砖，加了一些自己的想法。
在移动端里，因为存在2倍像素的问题，所以很多时候，移动端上的1px边框并不是意义上的。从下图红色框看到dpr：2.0 ，表示1px等于2倍的物理像素。
网上找了一下，自己总结了一下。
实现方法代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport"> 6 <meta content="yes" name="apple-mobile-web-app-capable"> 7 <meta content="black" name="apple-mobile-web-app-status-bar-style"> 8 <meta content="telephone=no" name="format-detection"> 9 <meta content="email=no" name="format-detection"> 10 <title>1px的边框问题</title> 11 <style type="text/css"> 12 .line { 13 height: 50px; 14 width: 200px; 15 line-height: 50px; 16 background-color: #CCC; 17 text-align: center; 18 border-bottom:1px solid red; 19 margin-bottom: 20px; 20 } 21 22 .scale { 23 height: 50px; 24 width: 200px; 25 line-height: 50px; 26 background-color: #CCC; 27 text-align: center; 28 margin-bottom: 20px; 29 } 30 .scaleV2 { 31 height: 50px; 32 width: 200px; 33 line-height: 50px; 34 text-align: center; 35 background-color: #CCC; 36 margin-bottom: 20px; 37 border-radius: 5px; 38 39 } 40 .topLine,.bottomLine,.leftLine,.rightLine,.borderLine,.radiusLine{ 41 position: relative; 42 } 43 .bottomLine:after { 44 position: absolute; 45 content: ''; 46 width: 200%; 47 left: 0; 48 bottom: 0; 49 height: 1px; 50 padding-bottom: 1px; 51 background-color: red; 52 -webkit-transform: scale(.5); 53 transform: scale(.5); 54 -webkit-transform-origin: left bottom; 55 transform-origin: left bottom; 56 } 57 .topLine:after { 58 position: absolute; 59 content: ''; 60 width: 200%; 61 left: 0; 62 top: 0; 63 height: 1px; 64 background-color: red; 65 -webkit-transform: scale(.5); 66 transform: scale(.5); 67 -webkit-transform-origin: left bottom; 68 transform-origin: left bottom; 69 } 70 .leftLine:after { 71 position: absolute; 72 content: ''; 73 width: 1px; 74 left: 0; 75 top: 0; 76 height: 200%; 77 background-color: red; 78 -webkit-transform: scale(.5); 79 transform: scale(.5); 80 -webkit-transform-origin: left bottom; 81 transform-origin: left top; 82 } 83 .rightLine:after { 84 position: absolute; 85 content: ''; 86 width: 1px; 87 right: 0; 88 top: 0; 89 height: 200%; 90 background-color: red; 91 -webkit-transform: scale(.5); 92 transform: scale(.5); 93 -webkit-transform-origin: center bottom; 94 transform-origin: right top; 95 } 96 97 .borderLine:after { 98 position: absolute; 99 content: ''; 100 width: 200%; 101 left: 0; 102 top: 0; 103 height: 200%; 104 border: 1px solid red; 105 -webkit-transform: scale(.5); 106 transform: scale(.5); 107 -webkit-transform-origin: left top; 108 transform-origin: left top; 109 } 110 111 .radiusLine:after { 112 position: absolute; 113 content: ''; 114 width: 200%; 115 left: 0; 116 top: 0; 117 height: 200%; 118 border: 1px solid red; 119 border-radius: 10px; 120 -webkit-transform: scale(.5); 121 transform: scale(.5); 122 -webkit-transform-origin: left top; 123 transform-origin: left top; 124 } 125 </style> 126 </head> 127 128 <body> 129 <div class="line">1px</div> 130 <div class="scale topLine">0.5px 上边框</div> 131 <div class="scale bottomLine">0.5px 下边框</div> 132 <div class="scale leftLine">0.5px 左边框</div> 133 <div class="scale rightLine">0.5px 右边框</div> 134 <div class="scale borderLine">0.5px 边框</div> 135 <div class="scaleV2 radiusLine">0.5px 圆角边框</div> 136 </body> 137 138 </html>
其实还是发现有一些的问题。
就是在在圆角的情况下会有写漏空。
看了一个大神的博客，他是用这样的一种方法的。没有这样的问题。
.btn:before { content: ''; position: absolute; top: -50%; bottom: -50%; left: -50%; right: -50%; -webkit-transform: scale(0.5); transform: scale(0.5); border-style: solid; border-width: 1px; border-color: red; -webkit-border-radius: 10px; border-radius: 10px; }
实现.5px的圆角边框
.5px的边框，看起来看神奇，这里感谢蓝叔提供的方法。
原理：先定义1px的圆角边框，然后拉伸内容的宽度和高度为父级的2倍(边框厚度不变)，然后再使用transform:scale(0.5)缩放为原来的0.5倍
转：http://peunzhang.cnblogs.com/
