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

最新推荐文章于 2024-07-30 19:57:09 发布

langyu1021

最新推荐文章于 2024-07-30 19:57:09 发布

阅读量7.1k

点赞数

分类专栏： html 前端文章标签： css

本文链接：https://blog.csdn.net/langyu1021/article/details/82356411

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

先贴个效果

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