css tabbar 凹凸圆
时间: 2023-07-02 08:13:05 浏览: 56
您可以使用CSS中的伪元素和边框属性来创建一个凹凸圆形的tabbar。
首先,创建一个包含所有tab的容器,并为其设置样式:
```css
.tab-container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f2f2f2;
border-radius: 20px;
overflow: hidden;
padding: 8px;
}
```
然后,为每个tab创建一个单独的元素,并使用伪元素来创建凹凸效果:
```css
.tab {
position: relative;
padding: 12px;
font-size: 18px;
}
.tab::before,
.tab::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 10px;
background-color: #f2f2f2;
border-radius: 50%;
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1),
0 6px 0 rgba(0, 0, 0, 0.1),
0 9px 0 rgba(0, 0, 0, 0.1),
0 12px 0 rgba(0, 0, 0, 0.1);
}
.tab::before {
left: -5px;
}
.tab::after {
right: -5px;
}
```
这段代码将创建一个具有以下特征的tabbar:
- 背景颜色为 #f2f2f2
- 边框半径为 20px
- 内边距为 8px
- 每个tab具有12px的内边距和18px的字体大小
- 通过使用伪元素,每个tab的左边和右边都有一个凸出的圆角
您可以根据需要调整这些值以创建您想要的外观。