经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
css 边框添加四个角的实现代码_CSS教程_CSS
来源:jb51  时间:2021/10/19 15:32:25  对本文有异议

1、html

  1. <div class="loginbody">
  2. <div class="border_corner border_corner_left_top"></div>
  3. <div class="border_corner border_corner_right_top"></div>
  4. <div class="border_corner border_corner_left_bottom"></div>
  5. <div class="border_corner border_corner_right_bottom"></div>
  6.  
  7.       <--other……………………-->
  8. </div>

2、css

  1. .loginbody{
  2. border: 1px solid #21a7e1;
  3. box-shadow: 5px 5px 10px 10px rgba(24,68,124,0.4);
  4. padding-top:20px;
  5. border-radius: 6px;
  6. position: relative;
  7. }
  8.  
  9. /*四个角框*/
  10. .border_corner{
  11. z-index: 2500;
  12. position: absolute;
  13. width: 19px;
  14. height: 19px;
  15. background: rgba(0,0,0,0);
  16. border: 4px solid #1fa5f1;
  17. }
  18. .border_corner_left_top{
  19. top: -2px;
  20. left: -2px;
  21. border-right: none;
  22. border-bottom: none;
  23. border-top-left-radius: 6px;
  24. }
  25. .border_corner_right_top{
  26. top: -2px;
  27. right: -2px;
  28. border-left: none;
  29. border-bottom: none;
  30. border-top-right-radius: 6px;
  31. }
  32. .border_corner_left_bottom{
  33. bottom: -2px;
  34. left: -2px;
  35. border-right: none;
  36. border-top: none;
  37. border-bottom-left-radius: 6px;
  38. }
  39. .border_corner_right_bottom{
  40. bottom: -2px;
  41. right: -2px;
  42. border-left: none;
  43. border-top: none;
  44. border-bottom-right-radius: 6px;
  45. }

到此这篇关于css 边框添加四个角效果的文章就介绍到这了,更多相关css 边框添加四个角内容请搜索w3xue以前的文章或继续浏览下面的相关文章,希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号