你想要创建一个圆角栏目的选项卡效果，其中一个选中的选项是用白色文本填充蓝色背景，而其他选项是黑色文本填充灰色背景。
以下是使用html和css实现此效果的方法：
<div class="tabs">
<div class="tab active">日</div>
<div class="tab">周</div>
<div class="tab">月</div>
<div class="tab">年</div>
</div>.tabs {
display: flex;
justify-content: space-between;
flex-direction: row;
background-color: #E1E1E1;
border-radius: 82px;
height: 82px;
}
.tab {
font-size: 36px;
color: rgba(69, 69, 68, 1);
width: 100%;
text-align: center;
line-height: 82px;
}
.tab.active {
color: rgba(255, 255, 255, 1);
background-color: #31BDEC;
border-radius: 82px;
}效果展示：
立即学习“前端免费学习笔记（深入）”；
[图片]
以上就是Vue/UniApp中如何制作圆角选项卡，且选中状态颜色与未选中状态颜色不同？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1000
收藏
