欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css 四周边框角加粗效果

程序员文章站 2022-06-19 21:38:25
Document ......
css 四周边框角加粗效果

 


<!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>