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中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
你应该知道的30个css选择器
Mar 19 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
Apr 16 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 HTML / CSS
html5实现点击弹出图片功能
Jul 16 HTML / CSS
使用CSS设置滚动条样式
Jan 18 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
第十节--抽象方法和抽象类
2006/11/16 PHP
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
php在字符串中查找另一个字符串
2008/11/19 PHP
PHP 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
php实现Mysql简易操作类
2015/10/11 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
js实现二级导航功能
2017/03/03 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
python列表推导式入门学习解析
2019/12/02 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
python学生管理系统的实现
2020/04/05 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
市场部管理制度
2014/02/02 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
个人贷款担保书
2014/04/01 职场文书
高一军训决心书
2015/02/05 职场文书
老公婚前保证书
2015/02/28 职场文书
自荐信怎么写
2015/03/04 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
Python使用Kubernetes API访问集群
2021/05/30 Python
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js