css实现只有四个角才有边框

桃扇骨 2022-12-20 12:52 140阅读 0赞

页面效果

![20201112170812662.png][]

<div className="border_table_box">
            <div className="border_table border_table_left_top"></div>
    		<div className="border_table border_table_right_top"></div>
    		<div className="border_table border_table_left_bottom"></div>
    		<div className="border_table border_table_right_bottom"></div>
            <div className="border_table_content">我们这个放置内容的盒子</div>
    </div>

.border_table_box{position: relative;}
    .border_table{position: absolute;
    	width: 20px;
    	height: 20px;
    }
    .border_table_left_top{top: 0;
    	left: 0;
    	border-left: 1px solid #2f7f9d;
    	border-top: 1px solid #2f7f9d;
    }
    .border_table_right_top{top: 0;
    	right: -2px;
    	border-right: 1px solid #2f7f9d;
    	border-top: 1px solid #2f7f9d;
    }
    .border_table_left_bottom{bottom: 0;
    	left: 0;
    	border-bottom: 1px solid #2f7f9d;
    	border-left: 1px solid #2f7f9d;
    }
    .border_table_right_bottom{bottom: 0;
    	right: -2px;
    	border-right: 1px solid #2f7f9d;
    	border-bottom: 1px solid #2f7f9d;
    }

[20201112170812662.png]: /images/20221120/501f071d8e934bc39e9123f796c37e8b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，140人围观）

还没有评论，来说两句吧...

相关阅读

相关 css实现只有四个角才有边框

页面效果 ![20201112170812662.png][] <div className="border_table_box"> <di

桃扇骨/ 2022年12月20日 12:52/ 0 赞/ 141 阅读

相关 CSS3实现缺角矩形，缺角边框以及折角矩形

> 项目中经常用到不规则的背景或边框，最直接的解决方案是通过切图或用伪类before、after遮挡，但是这两种方法都有弊端，索性花时间整理学习一下更好的解决方案，方便取用。

﹏ヽ暗。殇╰゛Y/ 2022年11月24日 14:27/ 0 赞/ 409 阅读

相关只有全力以赴，才有底气与他人拼天赋

最近，一向阳光的鱼妹突然变得很沮丧。公司有一个精英团队，负责主力品牌的核心业务。鱼妹曾在入职的第三个月就以“最上进员工”的身份杀进了精英团队，能与公司元老们一起工作一直是鱼

叁歲伎倆/ 2022年10月07日 01:00/ 0 赞/ 116 阅读

相关只有外边框的table

<table border="0" style="border:1px solid \000000;" cellpadding="0"cellspacing="1">

傷城~/ 2022年08月25日 13:50/ 0 赞/ 160 阅读

相关只有程序员才懂的幽默

1. 老婆给当程序员的老公打电话：下班顺路买十个包子，如果看到卖西瓜的，买一个。当晚老公手捧一个包子进了家门。老婆怒道：你怎么只买一个包子？！老公甚恐，喃喃道：因为我真看到卖西

客官°小女子只卖身不卖艺/ 2022年05月30日 00:28/ 0 赞/ 220 阅读

相关只有程序员才会玩的游戏

前言这些游戏恐怕只有程序员才会玩了。不信？往下看！ Nazo Game 这是一个在线解谜游戏，画风简洁，部分关卡需要具备一定的web知识。url地址直接访问，打

叁歲伎倆/ 2022年04月24日 09:54/ 0 赞/ 414 阅读

相关 CSS-使用background实现四个角边框

使用background实现四个角边框。 CSS .question_title_content { background: linear-gra

落日映苍穹つ/ 2022年04月02日 06:19/ 1 赞/ 666 阅读

相关只有程序员才会玩的游戏

这些游戏恐怕只有程序员才会玩了。不信？往下看！ Nazo Game 这是一个在线解谜游戏，画风简洁，部分关卡需要具备一定的web知识。url地址直接访问，打开浏览器调试

布满荆棘的人生/ 2022年01月30日 11:15/ 0 赞/ 318 阅读

相关推荐几个只有程序员才会玩的游戏

点击蓝色“五分钟学算法”关注我哟加个“星标”，一起学算法 ![640?wx\_fmt=jpeg][640_wx_fmt_jpeg] 作者 | 守望先生来源 | 编程

怼烎@/ 2021年11月09日 06:40/ 0 赞/ 316 阅读

相关 css问题之如何使div四个边框都有阴影

HTML <div class="isShadow"></div> css .isShadow{ background

向右看齐/ 2021年09月18日 17:02/ 0 赞/ 371 阅读