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之UI元素状态伪类选择器实例演示
Aug 11 HTML / CSS
巧用CSS3 border实现图片遮罩效果代码
Apr 09 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 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
phpQuery占用内存过多的处理方法
2013/11/13 PHP
php实现水仙花数示例分享
2014/04/03 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
javascript 面向对象 function类
2010/05/13 Javascript
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
Python运算符重载用法实例
2015/05/28 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
python实现发送邮件
2021/03/02 Python
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
材料成型专业个人求职信范文
2013/09/25 职场文书
个人自我鉴定写法
2013/11/30 职场文书
煤矿班组长岗位职责
2013/12/29 职场文书
预备党员思想汇报
2014/01/08 职场文书
安全环保标语
2014/06/09 职场文书
师范大学生求职信
2014/06/13 职场文书
就业意向书
2014/07/29 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
《搭石》教学反思
2016/02/18 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS