css上方和下方成弧形

在网页设计中，有时会需要将页面的上方或下方呈现成弧形，以增加整体的美观度和艺术感。这时候我们可以使用 CSS 技术来实现这一效果。

要实现上方或下方成弧形效果，首先我们需要创建一个 div，然后在其上应用相应的 CSS 样式。

 <div class="arc"></div>

    .arc {
        width: 500px;
        height: 200px;
        background-color: #eee;
        border-radius: 50% / 100%;
    } 

以上 CSS 代码中，我们设置了生成一个 500x200 的矩形区域，并将其背景色设置为 #eee。

我们接着应用了 border-radius 属性，将 div 元素的所有四个角都设置为圆形。这时候你会发现，元素四周呈现出圆弧边缘的效果。

注意，我们在 border-radius 属性中使用了两个值 50% 和 100%。这两个值的含义分别是，半径水平方向的比例和半径垂直方向的比例。设置了这两个比例之后，元素的弧度就被确定下来了。

当然，我们也可以根据需要设置不同的数值来调整弧度大小，使其更符合设计要求。比如，我们可以通过调整上方和下方的弧度值，让整个元素呈现出对称美感的效果。

以上就是使用 CSS 实现网页元素上方和下方成弧形的方法。通过这种简单的技巧，我们能够让网页看上去更加美观和有吸引力。