.box text {
color: #2298fc;
padding: 5rpx 10rpx;
}
.box text.borderB {
position: relative;
}
.box text.borderB:after {
display: block;
content: '';
position: absolute;
top: 0;
bottom: auto;
left: 0;
right: auto;
-webkit-transform-origin: 0 0;
-webkit-transform: scale(1);
pointer-events: none;
border: 1px solid #2298fc;
border-radius: 5px;
}
@media screen and (-webkit-min-device-pixel-ratio:1.5) {
.box text.borderB:after {
right: -100%;
bottom: -100%;
-webkit-transform: scale(0.5);
}
}
这个效果在移动端很明显,边框很细,PC端显示屏很大,可不计较这点粗细差别。