边框四个角加粗效果css，感觉还不错

最新推荐文章于 2025-10-28 18:03:24 发布

原创最新推荐文章于 2025-10-28 18:03:24 发布 · 7.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css

前端同时被 2 个专栏收录

7 篇文章

订阅专栏

html

5 篇文章

订阅专栏

本文介绍了一种使用CSS实现的特殊边框效果，通过多个叠加的边框元素创建了独特的视觉体验。该方法利用了绝对定位和不同宽度的边框来达到超出常规div边框的表现形式。

先贴个效果

<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;}
.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>
<div>
	<span class="border row1"></span>
	<span class="border row2"></span>
	<span class="border col1"></span>
	<span class="border col2"></span>
</div>