## 1px边框 在移动端中，如果给元素设置一个像素的边框，在手机上看起来是会比一个像素粗的。**解决方法：使用伪类元素模拟边框，使用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)); } } ``` ``` .a::after { content: ''; display: block; width: 100%; height: 1px; background: #333; position: absolute; left: 0; bottom: 0; transform: scaleY(0.5) } ```