在前端开发中，我们经常需要自定义页面的样式，其中背景样式也是非常重要的一部分。而有时候，我们需要把背景做成一个圆弧形，来增加页面美感。下面，我们来介绍一下如何使用CSS来实现这一效果。

.background {width: 100%;height: 400px; background-color: #f2f2f2; position: relative; overflow: hidden;}.background:before, .background:after {content: '';position: absolute;bottom: -400px; width: 200%; height: 800px;border-radius: 50%; }.background:before {left: -50%; background-color: #04B2D9; }.background:after {right: -50%; background-color: #E9B04C; }

在上面的代码中，我们首先创建了一个高度为400px、宽度为100%的div容器，并设置了背景色为#f2f2f2，这个容器的定位方式为relative（相对定位），并设置了overflow为hidden，目的是把超出容器大小的圆弧部分隐藏起来。

接下来，我们用:before和:after伪元素分别在容器的左右两边创建两个圆弧，并给它们设置了border-radius属性为50%，将一个长方形变为圆形，从而达到弧形的效果。注意，我们设置这两个伪元素的bottom为-400px，是为了让它们出现在容器底部。

最后，我们在:before中设置了背景色为#04B2D9，在:after中设置背景色为#E9B04C，来增加页面的鲜明度和色彩对比度。这样，我们就成功地把背景做成了一个漂亮的圆弧形！