tnblog
首页
视频
资源
登录
原

div 加四个边角

6354人阅读 2020/11/17 19:35 总访问：297503 评论：10 收藏：0 手机
分类: 前端

效果图

代码如下

 <div class="boxall">
                sss
     <div class="boxfoot"></div>
 </div>

css


.boxall {
    border: 1px solid rgba(25, 186, 139, .17);
    padding: 0rem .3rem .3rem;
    position: relative;
    margin-bottom: 1rem;
}

.boxall:before,
.boxall:after {
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    content: "";
    border-top: 2px solid #02a6b5;
    top: 0;
}

.boxall:before,
.boxfoot:before {
    border-left: 2px solid #02a6b5;
    left: 0;
}

.boxall:after,
.boxfoot:after {
    border-right: 2px solid #02a6b5;
    right: 0;
}

.boxfoot {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
}

.boxfoot:before,
.boxfoot:after {
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    content: "";
    border-bottom: 2px solid #02a6b5;
    bottom: 0;
}


评价

TeachingNote

2020/11/18 9:38:35

秀啊！

回复

是伍尚金哇_v

2020/11/18 14:40:10

前端大佬

回复
人生若只如初见:@是伍尚金哇_v我写后端的，被迫搞前端

2020/11/19 10:08:18 回复

2020/11/19 10:27:18 回复

2020/11/19 11:15:17 回复

剑轩

2020/11/18 16:19:30

这个代码的样式还挺好看的

回复
人生若只如初见:@剑轩这要弄大屏展示数据，所以都要加角

2020/11/19 10:09:02 回复

是伍尚金哇_v:@人生若只如初见同样是搞大屏，为何你做样式就那么好看

2020/11/19 11:15:43 回复

剑轩:@人生若只如初见我搞了一次大屏抽奖的，调样式把我调安逸了

2020/11/19 11:26:53 回复

人生若只如初见:@是伍尚金哇_v因为他不满意，就一直要我写满意，太难了

2020/11/19 11:28:40 回复

div+CSS网页布局常用的一些基础知识整理
一．文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print...

干货！div滚动到一定位置就固定他。Vue中实现一侧滚动到底部就固定
尊重原创：转载请注名出处div滚动到一定位置就固定他，例如左边的内容很多，右边的内容很少，如果不处理滚动到一定位置后右...

css div水平居 。文字垂直居中 。flex的方式实现div的垂直与水平居中。布局模板
DIV等元素水平居中定宽度+margin:top auto可以让一个块级别元素在外层居中例如这样：效果：可以看到这个div已经居中了但是...

图片在一个div内容水平与垂直居中
图片宽度与高度设置成80%,然后设置margin-top:10%,margin-left:10%就可以了感觉应该没有这么简单哇，不过反正就是可以了，...

div跟随与div拖动
div跟随，就是一个鼠标移动事件html:&lt;divid=&quot;playbox&quot;class=&quot;box&quot;&gt; 不要跟着我 &lt;/div&gt;j...

js键盘移动div与背景滚动效果
通过键盘按下事件记录按键如果按下的时候就去移动div位置，就不能使用组合键了，不能让div斜着走了,所以只做一个按键记录就...

去掉百度编辑器div被替换成p标签
百度编辑器默认会把div替换成p标签，这样我们在编写一些自定义模板的时候就会改变我们的结构，造成一些问题。解决方法：在u...

div 自适应高度，自动填充剩余高度
方案1：&lt;divclass=&quot;outer&quot;&gt; &lt;divclass=&quot;A&quot;&gt;头部&lt;/div&gt; &lt;divclass=&quot;B&quo...

jquery 获取一个div内容本身的高度
很简单，把内容再加个嵌套，获取嵌套的高度就可以了，嵌套的高度等于内容的高度。举例：//假设以下div1是带滑动条的块&lt;d...

div嵌套div自适应增高
div嵌套div里面div一旦使用浮动，外层div是无法自增高的，但是一般只有设置了背景图片才会出现这种问题就像这样可以看到高...

bootstrap div垂直居中
code:&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;UTF-8&quot;&gt; &lt;metaname=&quot;vi...

jquery 找到显示与隐藏的div
jquery 找到显示的divvardivs=$(&quot;div:hidden&quot;);jquery 找到隐藏的div$(&quot;div:visible&quot;);

设置div点击域隐藏div
直接上代码//监听全部全部鼠标事件$(document).mouseup(function (e) { var con = $(&quot;div&quot;); // 设...

layer表格点击事件悬浮div（更新修改一下错误）
效果图首先说说需求，点击表格某一列显示详情layertable有个监听事件event有两种方式触发，第一种是按钮也就是操作一栏，这...

关于点击时悬浮当前位置div部分显示不全问题
//点击触发悬浮div可以看看这篇 ：https://www.tnblog.net/15736469932/article/details/5137 t为当前table点击事件的top ...
若人生只如初见，愿还是相遇的那个下午，阳光明媚转身一笑便如春暖花开
博主信息
排名
16
文章
53
粉丝
7
评论
13
文章类别
最新文章
最新评价
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
不会去爱，那就别爱，天有注定，缘也会散。