1实现带三角边框

效果

右

左

上

下

实现代码

<div class="cssTest-right"></div>
<div class="cssTest-left"></div>
<div class="cssTest-top"></div>
<div class="cssTest-bottom"></div>

.mainbox .panel {position: relative;height: 3.875rem;padding: 0 0.1875rem 0.5rem;border: 1px solid rgba(25, 186, 139, 0.17);background: url(../images/line.png) rgba(225, 225, 225, 0.03);margin-bottom: 0.1875rem;
}
.mainbox .panel::before {position: absolute;top: 0px;left: 0px;width: 10px;height: 10px;border-left: 2px solid #02a6b5;border-top: 2px solid #02a6b5;content: "";
}
.mainbox .panel::after {position: absolute;top: 0px;right: 0px;width: 10px;height: 10px;border-right: 2px solid #02a6b5;border-top: 2px solid #02a6b5;content: "";
}
.mainbox .panel .panel-footer {position: absolute;bottom: 0px;left: 0px;width: 100%;
}
.mainbox .panel .panel-footer::before {position: absolute;bottom: 0px;right: 0px;width: 10px;height: 10px;border-right: 2px solid #02a6b5;border-bottom: 2px solid #02a6b5;content: "";
}
.mainbox .panel .panel-footer::after {position: absolute;bottom: 0px;left: 0px;width: 10px;height: 10px;border-left: 2px solid #02a6b5;border-bottom: 2px solid #02a6b5;content: "";
}

2 before和after伪类实现四角边框

TML+CSS

利用伪类制作边框

div class="colume"><div class="panel bar"><h2>柱形图</h2><div class="chart"></div><div class="panel-footer"></div></div>
</div>

.mainbox .panel {position: relative;height: 3.875rem;padding: 0 0.1875rem 0.5rem;border: 1px solid rgba(25, 186, 139, 0.17);background: url(../images/line.png) rgba(225, 225, 225, 0.03);margin-bottom: 0.1875rem;
}
.mainbox .panel::before {position: absolute;top: 0px;left: 0px;width: 10px;height: 10px;border-left: 2px solid #02a6b5;border-top: 2px solid #02a6b5;content: "";
}
.mainbox .panel::after {position: absolute;top: 0px;right: 0px;width: 10px;height: 10px;border-right: 2px solid #02a6b5;border-top: 2px solid #02a6b5;content: "";
}
.mainbox .panel .panel-footer {position: absolute;bottom: 0px;left: 0px;width: 100%;
}
.mainbox .panel .panel-footer::before {position: absolute;bottom: 0px;right: 0px;width: 10px;height: 10px;border-right: 2px solid #02a6b5;border-bottom: 2px solid #02a6b5;content: "";
}
.mainbox .panel .panel-footer::after {position: absolute;bottom: 0px;left: 0px;width: 10px;height: 10px;border-left: 2px solid #02a6b5;border-bottom: 2px solid #02a6b5;content: "";
}

方法2

       <div class="global_echarts_box"><p class="global_biaoti2">监管系统标题1</p></div>

 global_echarts_box {position: absolute;width: 23%;height: 70%;top: 20vh;right: 4vh;// csss实现四角边框box-shadow: 0 0 20px #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: 2px 12px, 12px 2px;
}

CSS技巧（一）——before、after相关推荐

你应该知道的25个非常有用的CSS技巧
在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼容性的问题, CSS网页布局,说难,其实很简单.说它容易,往往有很多问题困扰着新手,在中介绍了非常多的技巧,这些小技巧与知 ...
[css] 举例说明你知道的css技巧有哪些？
[css] 举例说明你知道的css技巧有哪些? /* 等比例容器 */ .ratio { position: relative; display: block; } .ratio:before { c ...
css label 居中布局_用好这20个css技巧快速提升你的CSS技能
点击右上方红色按钮关注"web秀",让你真正秀起来前言随着前端开发越来越关注效率:通过选择器的使用和简化代码来快速加载渲染.像Less.SCSS这样的预处理器在工作的时候,需要 ...
如何提升你的CSS技能？掌握这20个css技巧即可[完整版]
前言随着前端开发越来越关注效率:通过选择器的使用和简化代码来快速加载渲染.像Less.SCSS这样的预处理器在工作的时候,需要绕的路较长,而直接使用css速度会更快.这里涵盖了20个css技巧来帮助 ...
css设置按钮竖直方向居中_前端设计师必须知道的10个重要的CSS技巧
对于一个初入门的前端设计师,在设计修改网站前端的时候,我们需要编写一些CSS.JS的内容达到界面效果.今天分享10个对于前端设计师来说重要的CSS技巧,这也是我在给许多客户做网站的过程当中总结出来的. ...
给商品评分效果，CSS技巧
像这种给商品评分的效果,基本上所有电商网站都有.这里写这个效果的时候运用到了一些CSS技巧.结合posiiton,z-index,background-p_w_picpath,background-p ...
先掌握这 19 个 css 技巧，解决一些疑难杂症
作者:Matt Maribojoc 译者:前端小智来源:stackabuse vue3 源码实战出来啦:在面试中,害怕被问到 Vue源码,或者想通过自己对Vue 源码的来秀一下面试官的,可以了解一下 ...
学无止境的CSS(xHTML+CSS技巧教程资源大全)
本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准要玩游戏,就得先了解规则.要 ...
【经典】CSS技巧教程资源大全
一,Web 标准要玩游戏,就得先了解规则.要学CSS,就应该先了解一下Web标准.尽管看上去不是必须的(我在学CSS之前,根本不知道也不想知道Web标准是个啥玩意儿).应该说,你是否学Web标准, ...
60+CSS技巧教程资源大全
一,Web 标准要玩游戏,就得先了解规则.要学CSS,就应该先了解一下Web标准.尽管看上去不是必须的(我在学CSS之前,根本不知道也不想知道Web标准是个啥玩意儿).应该说,你是否学Web标准,跟 ...

CSS技巧（一）——before、after

效果

CSS技巧（一）——before、after相关推荐

最新文章

热门文章