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的appearance属性改变任何元素的浏览器默认风格
Dec 24 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
配置H5的滚动条样式的示例代码
Mar 09 HTML / CSS
HTML5离线应用与客户端存储的实现
May 03 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
css3 filter属性的使用简介
Mar 31 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分页集合包括使用方法
2013/10/21 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
Python文件和目录操作详解
2015/02/08 Python
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
python 为什么说eval要慎用
2019/03/26 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
彪马英国官网:PUMA英国
2019/02/11 全球购物
自荐信的五个重要部分
2013/10/29 职场文书
大学生专科毕业生自我评价
2013/11/17 职场文书
生产副总岗位职责
2013/11/28 职场文书
组织关系转移介绍信
2014/01/16 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
合作意向书格式及范文
2014/03/31 职场文书
2014年班级工作总结
2014/11/14 职场文书
2014年医院工作总结
2014/11/20 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
Python中的xlrd模块使用整理
2021/06/15 Python
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS