小编给大家分享一下css如何实现矩形四个边角加粗，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
1、工具/原料
html
css
2、具体实现
效果图
html代码
<body> <h2 style="color: red">css实现矩形边角加粗</h2> <div class="main"> <span></span> <span></span> <span></span> <span></span> </div></body>css代码
body{ display: flex; justify-content: center; flex-direction: column; align-items: center; } .main{ position: relative; width: 400px; height: 200px; border: 1px solid red; } .main span:nth-child(1){ position: absolute; left: -5px; top: -5px; padding: 15px; border-style: solid; border-color: rebeccapurple; border-width: 5px 0 0 5px; } .main span:nth-child(2){ position: absolute; right: -5px; top: -5px; padding: 15px; border-style: solid; border-color: rebeccapurple; border-width: 5px 5px 0 0; } .main span:nth-child(3){ position: absolute; right: -5px; bottom: -5px; padding: 15px; border-style: solid; border-color: rebeccapurple; border-width: 0 5px 5px 0; } .main span:nth-child(4){ position: absolute; left: -5px; bottom: -5px; padding: 15px; border-style: solid; border-color: rebeccapurple; border-width: 0 0 5px 5px; }以上是“css如何实现矩形四个边角加粗”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
