1、ht ML
<div class="lo gin body"> <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&helli p; …………………--> </div>
2、css
. LOG inbody{ border: 1px solid # 21a7e1; box -s hadow: 5px 5px 10px 10px rgba(24,68,124,0.4); padding -t op:20px; border-radius: 6px; pos IT ion: relative; } /*四个角框*/ .border_corner{ z -i ndex: 2500; position: absolute; width: 19px; h ei ght: 19px; background: rgba(0,0,0,0); border: 4px solid #1fa5 F1 ; } .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 边框添加四个角内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
总结
以上是 为你收集整理的 css 边框添加四个角的实现代码 全部内容,希望文章能够帮你解决 css 边框添加四个角的实现代码 所遇到的问题。
如果觉得 网站内容还不错, 推荐好友。
查看更多关于css 边框添加四个角的实现代码的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://www.haodehen.cn/did201814