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

最新推荐文章于 2023-03-08 17:17:30 发布

原创

最新推荐文章于 2023-03-08 17:17:30 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #圆角边框 #伪类选择器

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

制作一个类似浏览器标题栏的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