設定比1px還細的線
阿新 • • 發佈：2018-11-09
/**這個的話一般手機端會使用的比較多**/
正常情況瀏覽器100%：
當瀏覽器500%的時候，順序不變,顏色都是用的black，所以還是有區別的，具體看工作中需要那種
<!doctype html> <html lang="en"> <head> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta charset="UTF-8"><title>CSS3實現小於1px的邊框(移動端)</title> <style type="text/css"> *{margin: 0;padding: 0;-webkit-box-sizing:border-box;} .div-small{ height: 60px; line-height: 60px; padding-left: 10px; position: relative; font-size: 20px; } .div-small:after{ content: ""; display: block; position: absolute; left: -50%; width: 200%; height: 1px; background: black; -webkit-transform:scale(0.5); } #box{ width: 100%; height: 1px; margin: 10px auto; border-bottom: 1px solid black; } hr{ height: 1px; background: black; } </style> </head> <body> <div class="div-small">第一塊</div> <div id="box"></div> <hr> </body> </html>