[半转]1px边框 移动端

半转的意思是借鉴参考，搬砖，加了一些自己的想法。

在移动端里，因为存在2倍像素的问题，所以很多时候，移动端上的1px边框并不是意义上的。从下图红色框看到dpr：2.0 ，表示1px等于2倍的物理像素。

网上找了一下，自己总结了一下。

实现方法代码如下：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport">
 <meta content="yes" name="apple-mobile-web-app-capable">
 <meta content="black" name="apple-mobile-web-app-status-bar-style">
 <meta content="telephone=no" name="format-detection">
 <meta content="email=no" name="format-detection">
 <title>1px的边框问题</title>
 <style type="text/css">
 .line {
     height: 50px;
     width: 200px;
     line-height: 50px;
     background-color: #CCC;
     text-align: center;
     border-bottom:1px solid red;
     margin-bottom: 20px;
 } 

 .scale {
     height: 50px;
     width: 200px;
     line-height: 50px;
     background-color: #CCC;
     text-align: center;
     margin-bottom: 20px;
 }
 .scaleV2 {
     height: 50px;
     width: 200px;
     line-height: 50px;
     text-align: center;
     background-color: #CCC;
     margin-bottom: 20px;
     border-radius: 5px;

 }
 .topLine,.bottomLine,.leftLine,.rightLine,.borderLine,.radiusLine{
     position: relative;
 }
 .bottomLine:after {
     position: absolute;
     content: '';
     width: 200%;
     left: 0;
     bottom: 0;
     height: 1px;
     padding-bottom: 1px;
     background-color: red;
     -webkit-transform: scale(.5);
     transform: scale(.5);
     -webkit-transform-origin: left bottom;
     transform-origin: left bottom;
 }
 .topLine:after {
     position: absolute;
     content: '';
     width: 200%;
     left: 0;
     top: 0;
     height: 1px;
     background-color: red;
     -webkit-transform: scale(.5);
     transform: scale(.5);
     -webkit-transform-origin: left bottom;
     transform-origin: left bottom;
 }
 .leftLine:after {
     position: absolute;
     content: '';
     width: 1px;
     left: 0;
     top: 0;
     height: 200%;
     background-color: red;
     -webkit-transform: scale(.5);
     transform: scale(.5);
     -webkit-transform-origin: left bottom;
     transform-origin: left top;
 }
 .rightLine:after {
     position: absolute;
     content: '';
     width: 1px;
     right: 0;
     top: 0;
     height: 200%;
     background-color: red;
     -webkit-transform: scale(.5);
     transform: scale(.5);
     -webkit-transform-origin: center bottom;
     transform-origin: right top;
 }

 .borderLine:after {
     position: absolute;
     content: '';
     width: 200%;
     left: 0;
     top: 0;
     height: 200%;
     border: 1px solid red;
     -webkit-transform: scale(.5);
     transform: scale(.5);
     -webkit-transform-origin: left top;
     transform-origin: left top;
 }

 .radiusLine:after {
     position: absolute;
     content: '';
     width: 200%;
     left: 0;
     top: 0;
     height: 200%;
     border: 1px solid red;
     border-radius: 10px;
     -webkit-transform: scale(.5);
     transform: scale(.5);
     -webkit-transform-origin: left top;
     transform-origin: left top;
 }
 </style>
 </head>

 <body>
 <div class="line">1px</div>
 <div class="scale topLine">0.5px 上边框</div>
 <div class="scale bottomLine">0.5px 下边框</div>
 <div class="scale leftLine">0.5px 左边框</div>
 <div class="scale rightLine">0.5px 右边框</div>
 <div class="scale borderLine">0.5px 边框</div>
 <div class="scaleV2 radiusLine">0.5px 圆角边框</div>
 </body>

 </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/