使用 css 从上到下弯曲背景颜色中心
我试图在背景颜色的中心添加一条轻微的曲线。我正在尝试应用线性渐变背景颜色，然后它会被切断并变成白色背景。
我想在中心应用这条轻微的曲线，如下所示：
我尝试通过添加边框底部的左右半径来弯曲背景来实现此目的，这确实有效，但曲线更多地应用于边缘，而我试图从中心稍微弯曲。
这是我的代码的示例：
.content-container {
height: 150px;
background: linear-gradient(180deg, #FAFDFF 0%, #E8F3F9 100%);
border-bottom-left-radius: 13%;
border-bottom-right-radius: 13%;
}<div class="content-container">
<p>Testing</p>
<br/>
<br/>
<p>Testing</p>
</div>我尝试过使用负百分比来使曲线更靠近中心，如上图所示，但我没有运气。我怎样才能实现与上图类似的效果？
您可以像这样使用多个渐变：
<!DOCTYPE html>
<html>
<head>
<style>
#container {
height: 200px;
width: 400px;
background: radial-gradient(
ellipse 100% 40% at 50% 14%,
#E8F3F9 30%,
40%,
transparent 40%
),
conic-gradient(
at 50% 30.3%,
#E8F3F9 0.235turn,
transparent 0.235turn 0.765turn,
#E8F3F9 0.765turn
);
border: 1px dotted wheat;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>