1、html
1 | <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
1 | .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; } |
到此这篇关于css 边框添加四个角效果的文章就介绍到这了,更多相关css 边框添加四个角内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
本知识来源于互联网索引,如有侵权请联系我们!
嗨,这是一条评论。 要开始审核、编辑及删除评论,请访问仪表盘的“评论”页面。 评论者头像来自Gravatar。