CSS制作类似浏览器标题栏的圆角样式

最新推荐文章于 2025-05-07 15:34:16 发布

zlting~

最新推荐文章于 2025-05-07 15:34:16 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS样式文章标签： CSS 圆角边框伪类选择器

本文链接：https://blog.youkuaiyun.com/sunshineTing2/article/details/97641888

本文介绍了如何使用CSS实现一个类似浏览器标题栏的tab切换效果，通过结合元素的相对定位、圆角边框以及伪类选择器，创建出圆润的边角。内容中提到了需要两张10*10像素的PNG图片，即corner-left.png和corner-right.png，用于辅助实现这一视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

制作一个类似浏览器标题栏的tab切换效果CSS样式

在这里插入图片描述

圆弧的样式由 元素本身 + 左右两个小角 组成

在这里插入图片描述

首先，将元素设置 相对定位 + 圆角边框，以及宽高设为：

position: relative;   //相对定位
width: 120px; 
height: 40px; 
line-height: 40px; 
text-align: center; 
background-color: #fff;
border-radius: 10px 10px 0 0;   //圆角边框 上边圆角

然后，用到 伪类选择器： :before :after

.corner:before,.corner:after{
	content: " ";         //伪类选择器的使用，必须加content
	position: absolute;  //设置绝对定位，脱离文档流
	bottom: 0;          // 定位于底部
	z-index: 10;       //设置元素的堆叠顺序，必须加z-index，否则会被下一个元素覆盖
 	width: 10px;      //设置宽高
 	height: 10px; 
}
.co