css可以绘制这种圆形平滑凸起吗？

Question

这个TAB中间的这种，后面有个平滑凸起的背景

Answer 1

.tab-container {  display: flex;  justify-content: center;  align-items: center;  background-color: #f8f8f8;  position: relative;  height: 60px;}.tab {  padding: 10px 30px;  background-color: #fff;  border-radius: 30px;  position: relative;}.tab::before {  content: "";  position: absolute;  bottom: -10px;  left: 50%;  transform: translateX(-50%);  width: 60px;  height: 20px;  background-color: #fff;  border-radius: 50%;  box-shadow: 0px -10px 10px rgba(0, 0, 0, 0.1);}

<div class="tab-container">  <div class="tab">选项卡内容</div></div>

Answer 2

CSS可以用来绘制一些基本的形状，如正方形、圆形等。然而，要绘制平滑凸起的效果，CSS可能无法很好地实现，这需要更复杂的图形处理技术，如SVG或Canvas。

但我们可以使用一些技巧来模拟这种效果。一个简单的方法是使用伪元素（:before 或 :after）和CSS的 border-radius 属性。下面是一个简单的示例：

.tab {    position: relative;    width: 200px;    height: 50px;    background: #999;    border-radius: 50px 50px 0 0;}.tab:before {    content: '';    position: absolute;    top: -20px;    left: -20px;    right: -20px;    bottom: -20px;    background: #fff;    border-radius: inherit;}

这里我们创建了一个 .tab 的类，它有一个圆形凸起的效果。:before 伪元素则创建了一个与 .tab 相同大小的白色背景，然后通过 border-radius 属性将它的四个角部份弄圆，使其形成了一个平滑凸起的效果。

这种方法的效果可能并不是非常理想，具体的形状和效果可能需要根据你的具体需求进行修改。如果你需要更复杂的效果，可能需要使用 SVG 或 Canvas 等更强大的图形处理技术。