HTML+CSS怎样实现给边框添加角的成效

这篇主要是介绍“HTML+CSS怎样实现给边框添加角的效果”的内容了，下文有实例供大家参考，对大家了解操作过程或相关知识有一定的帮助，而且实用性强，希望这篇文章能帮助大家解决HTML+CSS怎样实现给边框添加角的效果的问题，下面我们一起来了解看看吧。

1、html

<div class="loginbody">

<div class="border_corner border_corner_left_top"></div>

<div class="border_corner border_corner_right_top"></div>

<div class="border_corner border_corner_left_bottom"></div>

<div class="border_corner border_corner_right_bottom"></div>

　　　　 　<--other……………………-->

</div>

2、css

.loginbody{

border: 1px solid #21a7e1;

box-shadow: 5px 5px 10px 10px rgba(24,68,124,0.4);

padding-top:20px;

border-radius: 6px;

position: relative;

}

/*四个角框*/

.border_corner{

z-index: 2500;

position: absolute;

width: 19px;

height: 19px;

background: rgba(0,0,0,0);

border: 4px solid #1fa5f1;

}

.border_corner_left_top{

top: -2px;

left: -2px;

border-right: none;

border-bottom: none;

border-top-left-radius: 6px;

}

.border_corner_right_top{

top: -2px;

right: -2px;

border-left: none;

border-bottom: none;

border-top-right-radius: 6px;

}

.border_corner_left_bottom{

bottom: -2px;

left: -2px;

border-right: none;

border-top: none;

border-bottom-left-radius: 6px;

}

.border_corner_right_bottom{

bottom: -2px;

right: -2px;

border-left: none;

border-top: none;

border-bottom-right-radius: 6px;

}

到此，关于“HTML+CSS怎样实现给边框添加角的效果”的学习就结束了，希望能够解决大家的疑惑，另外大家动手实践也很重要，对大家加深理解和学习很有帮助。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!