css制作切换选项卡 |css渐变画斑马线

HTML代码如下：
<div class="tab-box">
<ul class="tab-header">
<li class="tab-active">选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
</ul>
<div class="tab-body">
<div class="tab-content">这是选项卡1的内容</div>
<div class="tab-content">这是选项卡2的内容</div>
<div class="tab-content">这是选项卡3的内容</div>
</div>
</div>
CSS代码如下：
<style>
.tab-box {
border: 1px solid #ccc;
display: flex;
flex-direction: column;
width: 300px;
}
.tab-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #ccc;
}
.tab-header li {
cursor: pointer;
font-weight: bold;
list-style: none;
}
.tab-active {
color: red;
border-bottom: 2px solid red;
}
.tab-body {
padding: 10px;
}
.tab-content {
display: none;
}
.tab-active ~ .tab-content {
display: block;
}
</style>
上面代码中，首先定义了一个.tab-box的容器，包含一个.tab-header选项卡头和一个.tab-body选项卡内容区。.tab-header下面包含了三个选项卡，其中第一个选项卡添加一个.tab-active样式表示默认选中。.tab-body下面放置了三个选项卡内容，每个选项卡内容都有一个.tab-content样式表示隐藏。
接下来的CSS代码实现了选项卡的切换效果。通过设置.tab-active样式的样式，鼠标悬停到选项卡上面时，选项卡文本的颜色和下划线变成红色，同时.tab-active ~ .tab-content的样式使得选项卡内容区只会显示被激活的选项卡内容。