首页 > 代码库 > 边框0.5px的实现方法
边框0.5px的实现方法
原理: 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的实现方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。