" />

"/>
 首页 > 作文

css 边框添加四个角的实现代码

更新时间:2023-04-07 20:35:19 阅读: 评论:0

1、html

<div class="loginbody">          <div class="border_cor大学生必读ner border_corner_left_top"></div>          <div class="border_corner border_corner_right_top"></div>          <div clas战争与和平 作文s="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;        bo海南高考状元rder-left: none;        border-top: none;        border-bottom-right-radius: 6px;      }

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

本文发布于:2023-04-07 20:35:18,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/4e508e9ac35554e5388abe2c89643eba.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:css 边框添加四个角的实现代码.doc

本文 PDF 下载地址:css 边框添加四个角的实现代码.pdf

相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图