移动端边框1px处理

来源：互联网发布：淘宝网韩都衣舍商城编辑：程序博客网时间：2024/05/21 07:13
.border-1px,.border-bottom-1px,.border-top-1px,.border-left-1px,.border-right-1px {position: relative;}/*线条颜色 黑色*/.border-1px::after,.border-bottom-1px::after,.border-top-1px::after,.border-left-1px::after,.border-right-1px::after {background-color: #ccc;}/*底边边框一像素*/.border-bottom-1px::after {content: "";position: absolute;left: 0;bottom: 0;width: 100%;height: 1px;transform-origin: 0 0;}/*上边边框一像素*/.border-top-1px::after {content: "";position: absolute;left: 0;top: 0;width: 100%;height: 1px;transform-origin: 0 0;}/*左边边框一像素*/.border-left-1px::after {content: "";position: absolute;left: 0;top: 0;width: 1px;height: 100%;transform-origin: 0 0;}/*右边边框1像素*/.border-right-1px::after {content: "";box-sizing: border-box;position: absolute;right: 0;top: 0;width: 1px;height: 100%;transform-origin: 0 0;}/*边框一像素*/.border-1px::after {content: "";box-sizing: border-box;position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: 1px solid red;}/*设备像素比*/@media only screen and (-webkit-min-device-pixel-ratio: 2.0),only screen and (min-resolution: 2dppx) {.border-bottom-1px::after,.border-top-1px::after {transform: scaleY(0.5);}.border-left-1px::after,.border-right-1px::after {transform: scaleX(0.5);}.border-1px::after {width: 200%;height: 200%;transform: scale(0.5);transform-origin: 0 0;}}/*设备像素比*/@media only screen and (-webkit-min-device-pixel-ratio: 3.0),only screen and (min-resolution: 3dppx) {.border-bottom-1px::after,.border-top-1px::after {transform: scaleY(0.333);}.border-left-1px::after,.border-right-1px::after {transform: scaleX(0.333);}.border-1px::after {width: 300%;height: 300%;transform: scale(0.333);transform-origin: 0 0;}}
阅读全文
0 0