码迷,mamicode.com
首页 > Web开发 > 详细

css 四周边框角加粗效果

时间:2019-03-19 16:29:58      阅读:636      评论:0      收藏:0      [点我收藏+]

标签:charset   type   otto   com   bottom   top   ice   content   width   

技术图片

 


<!
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { position: relative; left: 50px; top: 50px; margin: 10px; width: 500px; height: 100px; border: 1px solid #E3581D; } .border { position: absolute; padding: 5px; border-style: solid; border-color: #E3581D; } .row1 { border-width: 5px 0 0 5px; top: -5px; left: -5px; border-radius: 4px 0 0 0; } .row2 { border-width: 5px 5px 0 0; top: -5px; right: -5px; } .col1 { border-width: 0 0 5px 5px; bottom: -5px; left: -5px; } .col2 { border-width: 0 5px 5px 0; bottom: -5px; right: -5px; } </style> </head> <body> <div> <span class="border row1"></span> <span class="border row2"></span> <span class="border col1"></span> <span class="border col2"></span> </div> </body> </html>

 

css 四周边框角加粗效果

标签:charset   type   otto   com   bottom   top   ice   content   width   

原文地址:https://www.cnblogs.com/Byme/p/10559472.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!