1、html
1 2 3 4 5 6 7 8 | <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> </div> |
2、css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | .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 边框添加四个角内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章，希望大家以后多多支持IT俱乐部！
