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


Posted in HTML / CSS onOctober 16, 2021

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

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

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

 
HTML / CSS 相关文章推荐
CSS3系列之3D制作方法案例
Aug 14 HTML / CSS
使用css3制作登录表单的步骤
Apr 07 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
CSS3中animation实现流光按钮效果
Dec 21 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 HTML / CSS
HTML基础详解(下)
Oct 16 #HTML / CSS
HTML基础详解(上)
Oct 16 #HTML / CSS
CSS基础详解
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
小程序实现悬浮按钮的全过程记录
Oct 16 #HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
浅析CSS在DevTools 中架构演变
You might like
用PHP实现多级树型菜单
2006/10/09 PHP
php中AES加密解密的例子小结
2014/02/18 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
cookie在javascript中的使用技巧以及隐私在服务器端的设置
2012/12/03 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
深入理解Javascript中的观察者模式
2017/02/20 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
Python通过future处理并发问题
2017/10/17 Python
Python多层装饰器用法实例分析
2018/02/09 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
python基础梳理(一)(推荐)
2019/04/06 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
师范生自我鉴定范文
2013/10/05 职场文书
书法培训心得体会
2014/01/05 职场文书
财务会计专业求职信
2014/06/09 职场文书
紫日观后感
2015/06/05 职场文书
2015团员个人年度总结
2015/11/24 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python