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

本文介绍了如何使用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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值