- &::after
- // 用以解决边框 layer 遮盖内容
- pointer-events: none;
- position: absolute;
- z-index: 999;
- top: 0;
- left: 0;
- // fix 当元素宽度出现小数时, 边框可能显示不全的问题
- // overflow: hidden;
- content: "\0020";
- border-color: $border-color;
- border-style: $border-style;
- border-width: $border-width;
- // 适配 dpr 进行缩放
- @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx)
- width: 100%;
- height: 100%;
- if $radius != null {
- border-radius: $radius;
- }
- @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),(min-resolution: 144dpi) and (max-resolution: 239dpi),(min-resolution: 1.5dppx) and (max-resolution: 2.49dppx)
- width: 200%;
- height: 200%;
- transform: scale(.5)
- if $radius != null {
- border-radius: $radius * 2;
- }
- @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5),(min-device-pixel-ratio: 2.5), (min-resolution: 240dpi),(min-resolution: 2.5dppx)
- width: 300%;
- height: 300%;
- transform: scale(.33333)
- if $radius != null {
- border-radius: $radius * 3;
- }
来源: http://www.bubuko.com/infodetail-2831791.html