給 div 設定顯示效果小於 1px 寬度的邊框
阿新 • • 發佈:2018-12-19
.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端顯示屏很大,可不計較這點粗細差別。