用CSS画弧形

有的时候在界面里想要做个漂亮的弧形边用来美观单一不变的矩形框。简单的顶点控制并不能很好实现想要的效果，用图片又不够完美，且多了加载项。那怎么用CSS来实现弧形呢？

先说一下原理，其实我们需要实现的是截取圆的小部分弧边，那么就首先要画一个足够大的圆，然后再在其中选取我们需要的截段，把其他部分隐去即可，一共也就两步。这里我们需要用到::after伪类。

先画个框作为容器，CSS代码如下：
```css
#div_headContainer {
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            margin: 5px;
            padding: 0 0 8px 0;
            height: 150px;
            border: darkgray 1px solid;
}
```
再在里面套个小框，是我们用来做圆的容器，CSS代码如下：
```css
#div_headContainerBackground {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            padding: 10px 10px 0 10px;
}
```
接下去就是关键了，我们使用:after伪类来实现背景：
```css
#div_headContainerBackground::after {
            content: '';
            width: 160%;
            height: 100%;
            position: absolute;
            left: -30%;
            top: 0;
            z-index: -1;
            border-radius: 0 0 50% 50%;
            background: -webkit-linear-gradient(left, #1ecec2, #1ad17a); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(right, #1ecec2, #1ad17a); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(right, #1ecec2, #1ad17a); /* Firefox 3.6 - 15 */
            background: linear-gradient(to right, #1ecec2, #1ad17a); /* 标准的语法（必须放在最后） */
}
```
效果如下，可以直接查看HTML代码。在这过程中，在元素后追加一个after，元素自身定位为relative，伪类设置`content: ''`，并相对定位为absolute，再设置下left、top值，使伪类元素的位置摆放的合理。这里需要注意的是把z-index值设为-1，因为弧形一般是作为背景图，层级自然要放低些。
![](/storage/0/article/20220504/8959e8649a6ccbdf6ddc6c48885e1aa2.png)

data.update.lastsys.time.agopunc.commaarticle.create.bypunc.commaarticle.file.inpunc.colonCSS

用CSS画弧形

sys.donate