CSS 可以实现各种各样的效果，包括弧形背景。下面我们来学习如何使用 CSS 来实现弧形背景。

.circle-background{
background: linear-gradient(128deg, #a8c0ff 0%, #3f2b96 100%);
height: 250px;
transform: skewY(-10deg);
border-radius: 20% 20% 0 0;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

首先我们需要设置一个 div 元素，并且给它一个特殊的 class，例如circle-background，方便我们后面调用样式。

接着，设置背景颜色。我们使用了线性渐变的形式来设置背景颜色，以下是代码解析：

background: linear-gradient(128deg, #a8c0ff 0%, #3f2b96 100%);

括号里的128deg指的是渐变的方向，可以自行调整。

接下来设置弧形，使用了 transform 属性的 skewY（向垂直轴顺时针或逆时针倾斜元素）方法使元素呈现弧形：

transform: skewY(-10deg);

此外，我们需要将弧形圆头部分设置成较为平直的形状，使用了 border-radius 属性。较为复杂的属性参考以下代码：

border-radius: 20% 20% 0 0;

最后，我们可以添加一些额外的样式来提升效果，比如添加阴影：

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);

这样，我们就能够很好地实现一个弧形背景了！