使用css给div添加四角边框的方法
使用css给div添加四角边框的方法
div添加四角边框，一般写法，我们会在四角分别放一个小方块设置边框，来实现效果，但当我们使用vue,或者需要封装称组件时，例如大屏的展示，如果将边框也封单独的组件，或许会觉得封装的太繁琐。这个时候我们直接使用全局css来实现这一效果，少一层封装，这样代码更方便维护。以上均为小编个人见解，只为跟大家分享下面的方法。
方法一：
- 首先前端使用class样式名字
<div class="global_echarts_box"><p class="global_biaoti2">监管系统标题1</p></div>
- css的实现
lobal_echarts_box {position: relative;width: 100%;height: 32%;// csss实现四角边框// box-shadow: 0 0 1.5vw #1f69b9b9 inset;background:linear-gradient(to bottom,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) left top no-repeat,linear-gradient(to right,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) left top no-repeat,linear-gradient(to bottom,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) right top no-repeat,linear-gradient(to left,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) right top no-repeat,linear-gradient(to top,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) left bottom no-repeat,linear-gradient(to right,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) left bottom no-repeat,linear-gradient(to top,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) right bottom no-repeat,linear-gradient(to left,#33cdfa 0px,#33cdfa 2px,transparent 3px,transparent 100%) right bottom no-repeat;background-size: 1.5rem 1.5rem;padding:2px;
}
添加之后的效果：
方法二：
- 首先前端使用class样式名字
<div class="global_echarts_box"><p class="global_biaoti2">监管系统标题1</p></div>
- css的实现
global_echarts_box {position: absolute;width: 23%;height: 70%;top: 20vh;right: 4vh;// csss实现四角边框box-shadow: 0 0 1.5vw #1f69b9b9 inset;background: linear-gradient(#33cdfa, #33cdfa) left top,linear-gradient(#33cdfa, #33cdfa) left top,linear-gradient(#33cdfa, #33cdfa) right top,linear-gradient(#33cdfa, #33cdfa) right top,linear-gradient(#33cdfa, #33cdfa) left bottom,linear-gradient(#33cdfa, #33cdfa) left bottom,linear-gradient(#33cdfa, #33cdfa) right bottom,linear-gradient(#33cdfa, #33cdfa) right bottom;background-repeat: no-repeat;background-size: 0.1vw 1.5vw, 1.5vw 0.1vw;
}
添加之后的效果：
使用css给div添加四角边框的方法相关推荐
- html怎么添加5px高的线,css给div添加0.5px的边框
具体代码实现如下: border div{ position: relative; width: 100%; background-color: #fff; } div:before{ content ...
- html给div加圆角边框,border-radius是向元素添加圆角边框的方法
原标题:border-radius是向元素添加圆角边框的方法 border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px ...
- css给div添加阴影
css给div添加阴影 <style type="text/css"> .mydiv{width:250px; height:auto;border:#909090 1 ...
- html div 居中心,CSS实现DIV居中的三种方法
下面给大家分享div居中的实现代码,具体代码如下所示: demo .div1{ width: 100px; height: 100px; border: 1px solid #000000;} .di ...
- CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- CSS教程:div垂直居中的N种方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- 给盒子添加花样边框的方法
这两天做项目遇到一个需要给盒子添加不同边框的需求,因此自己研究了一下,先上图看看成品的样子 在没仔细想的时候,我用的是分开切图的方法,然后分别设置,最后发现不对,达不到想要的效果. 之后仔细研究了bo ...
- html如何给图片加四周边框,css如何给div加上四角边框
先看效果图 HTML代码(注:view是微信小程序中的div,如果是html或者vue换成div即可): CSS代码: .a { width: 10px; height: 10px; position ...
- 使用css实现四边形实现四角边框
废话不多说,先上效果图 这个效果还行吧,还可以调整,大致是一个div,四个小div漂浮在其上面 首先先看代码结构,返回一个组件,直接使用 const BugleBorderBar:FunctionCo ...
最新文章
- 【LeetCode】0938. 二叉搜索树的范围和（二叉树的遍历）
- 圈子 | 苏宁易购产品经理：平台支撑型产品的思维方式
- 冒泡排序 java_冒泡排序Java版本
- nagios系列(七)nagios通过自定义脚本的方式监控mysql主从同步
- SharePoint 开发系列之三:开发工具和流程
- SQL语言概述、MySQL Workbench安装
- 整体橱柜效果图软件测试,别被效果图骗了，最适合中国人的厨房设计是这样的...
- HTML页面跳转及传递参数
- R语言快捷键大全中文版
- 低功耗实例——isolation cell及level shifter的选择
- 一文读懂nginx gzip
- Python 决策树计算熵、gini系数、误分率
- ariang修改默认服务器,Mac小技巧之AriaNg Native配置
- Cobot与Jenkins集成
- 部署kafka集群后创建主题报错WARN [AdminClient clientId=adminclient-1] Error connecting to node 14ca304
- Android效率组件篇 设置长按响应时间（时长）
- druid连接池监控
- Win10 平台下, LightGBM GPU 版本的安装
- 数据中心管理与运维的问题与对策
- 字典树 静态建树与动态建树