1px解决方案

1. 在移动端中，如果给元素设置一个像素的边框的话，那么在手机上看起来是会比一个像素粗的。

解决方法：使用伪类元素模拟边框，使用transform缩放

.button{    height: 36px;    line-height: 36px;    font-size: 14px;    padding: 0px;    margin: 0px;    padding-left: 16px;    padding-right: 16px;    background-color: white;    border: none;    outline: none;    box-sizing: border-box;    border-radius: 5px;    position: relative;    -webkit-user-select: none;    -ms-user-select: none;    -moz-user-select: none;    text-decoration: none;    display: block;}.button:after{    content: '';    z-index: 1;    position: absolute;    border: 1px solid rgba(0,0,0,0.23);    pointer-events: none;    box-sizing: border-box;    transform-origin: 0 0;    transform: scale(calc(1/1));    top: 0px;    left: 0px;    width: calc(100% * 1);    height: calc(100% * 1);    border-radius: calc(5px * 1);    transition: all ease-in-out 150ms;    background-color: rgba(0,0,0,0);}.button:active:after{    background-color: rgba(0,0,0,0.1);}.button.button-blue{    background-color: #3F51B5;    color: white;}.button.button-blue:active:after{    background-color: rgba(0,0,0,0.15);}@media screen and (-webkit-min-device-pixel-ratio: 2){    .button:after    {        border-radius: calc(5px * 2);        width: calc(100% * 2);        height: calc(100% * 2);        transform: scale(calc(1/2));    }}@media screen and (-webkit-min-device-pixel-ratio: 3){    .button:after    {        border-radius: calc(5px * 3);        width: calc(100% * 3);        height: calc(100% * 3);        transform: scale(calc(1/3));    }}@media screen and (-webkit-min-device-pixel-ratio: 4){    .button:after    {        border-radius: calc(5px * 4);        width: calc(100% * 4);        height: calc(100% * 4);        transform: scale(calc(1/4));    }}

1. 对于老项目伪类+transform

原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。单条border样式设置：优点：所有场景都能满足，支持圆角(伪类和本体类都需要加border-radius)缺点：对于已经使用伪类的元素(例如clearfix)，可能需要多层嵌套

.scale-1px{ position: relative; border:none; }    .scale-1px:after{    content: '';    position: absolute; bottom: 0;    background: #000;    width: 100%; height: 1px;    -webkit-transform: scaleY(0.5);    transform: scaleY(0.5);     -webkit-transform-origin: 0 0;    transform-origin: 0 0;}

1. viewport + rem 实现

这种兼容方案相对比较完美，适合新的项目，老的项目修改成本过大。

HTML:<div class="border-1px"></div>CSS:.border-1px {    position: relative;}.border-1px:after {    position: absolute;    content: "";    top: -50%;    bottom: -50%;    left: -50%;    right: -50%;    -webkit-transform: scale(0.5);    transform: scale(0.5);    border-top: 1px solid #666;}@media (-webkit-min-device-pixel-radio: 3), (min-device-pixel-radio: 3) {    border-1px::after {        -webkit-transform: scaleY(0.33333333);        transform: scaleY(0.33333333);    }}@media (-webkit-min-device-pixel-radio: 2), (min-device-pixel-radio: 2) {    border-1px::after {        -webkit-transform: scaleY(0.5);        transform: scaleY(0.5);    }}

优点：所有场景都能满足，一套代码，可以兼容基本所有布局缺点：老项目修改代价过大，只适用于新项目

1. 使用box-shadow模拟边框,利用css 对阴影处理的方式实现0.5px的效果

样式设置：

.box-shadow-1px {    box-shadow: inset 0px -1px 1px -1px #c8c7cc;}

优点：代码量少，可以满足所有场景缺点：边框有阴影，颜色变浅