不同畫素密度螢幕下實現1px邊框或分割線
阿新 • • 發佈:2018-12-23
1px邊框
//HTML <div class="one"></div> //CSS .one { position: relative; width: 100px; height: 100px; } .one::after { content: ''; position: absolute; width: 200%;/*2X*/ width: 300%;/*3X*/ height: 200%;/*2X*/ height: 300%;/*3X*/ border: 1px solid black; border-radius: 50%; transform: scale(.5);/*2X*/ transform: scale(.333);/*3X*/ top: 50%;/*2X*/ top: 100%;/*3X*/ left: 50%;/*2X*/ left: 100%;/*3X*/ }
1px分割線
//HTML <div class="line"></div> //CSS .line { position: relative; margin: 0 30px; } .line::after { content: ''; position: absolute; background: black; width: 200%;/*2X*/ width: 300%;/*3X*/ height: 1px; top: 0; left: 50%;/*2X*/ left: 100%;/*2X*/ transform: scale(.5);/*2X*/ transform: scale(.333);/*2X*/ }