邊框0.5px的實現方法
阿新 • • 發佈：2017-06-24
pan web -i tran webkit css3 borde index html
原理: css3 的縮放 ----> transform: scale()
完整代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { height: 200px; width: 200px; margin: 50px auto; position: relative;/*background: #f4f4f4;*/ } .box::after { content: ‘‘; position: absolute; left: 0; top: 0; z-index:-1; width: 200%; height:200%; border:1px solid #000000; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(.5, .5); transform: scale(.5, .5); -webkit-transform: scale(.5, .5); -ms-transform: scale(.5, .5); z-index: 1; /*不加的話，在有背景的情況下就只有下右兩邊框*/ } .bd-t::after { content: ""; position: absolute; top:0; left: 0; width: 100%; border-top: 1px solid #000; transform: scaleY(.5); -webkit-transform: scaleY(.5); -ms-transform: scaleY(.5); } .bd-l::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; border-left: 1px solid #000; transform: scaleX(.5); -webkit-transform: scaleX(.5); -ms-transform: scaleX(.5); } .box1 { height: 200px; width: 200px; margin: 50px auto; position: relative; border: 1px solid #000; /*background: #09f;*/ } </style> </head> <body> <div class="box"> 四條邊框0.5px </div> <div class="bd-t"> 頂部邊框0.5px </div> <div class="bd-l"> 左邊框0.5px </div> <div class="box1">參考相</div> </body> </html>
邊框0.5px的實現方法