css 边框添加四个角效果

释放双眼,带上耳机,听听看~!
%title插图%num

1、html

<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

      .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;
      }

给TA充电
共{{data.count}}人
人已充电
源码分享资讯

中国广电开放预约192号段号码,大量靓号供你选择

2022-6-8 10:57:53

csshtml/css/js源码分享

css 实现div 右上角加三角形

2022-6-26 18:59:20

版权免责声明

请使用迅雷软件下载,否则个别下载链接无法打开

1、本网站名称:彽调菂猫博客
2、本站永久网址:https://www.wtdxz.com
3、 本站大部分资源解压密码均为: www.wtdxz.com 如密码有误,请查看此处【解压密码】
4、请勿随意转载/分享/“菜”集本站资源,转载/分享/”菜”集请添加本站链接。
5、本站资源来源于互联网收集/个人购买,如有侵犯到您的权益,请查看【版权声明】
6、本站提供的所有资源均来自互联网搜索,站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业环境,任何人不得擅作它用,否则后果自负!请在下载24小时内删除!为尊重作者版权,请购买原版作品,支持你喜欢的作者,谢谢!
7、本站资源大多存储在云盘,如发现链接失效 请联系我们 我们会第一时间更新。

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索