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旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 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
global.php
2006/12/09 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
php微信开发之谷歌测距
2018/06/14 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
Javascript 自定义类型方法小结
2010/03/02 Javascript
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
python类继承用法实例分析
2014/10/10 Python
Python创建文件和追加文件内容实例
2014/10/21 Python
详解python中的装饰器
2018/07/10 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
师范生自我鉴定范文
2013/10/05 职场文书
函授教育个人学习的自我评价
2013/12/31 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
校本培训个人总结
2015/02/28 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python