为什么我用css渐变绘制出来的圆是这个鬼样子？

Question

如下图，一点都不圆，大家帮我看看我的代码是否有问题

html

 <div class="box"></div>


css

.box{
    position: relative;
    width: 300px;
    height: 140px;
    background: red;

}
.box:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 20px;

    background: radial-gradient(farthest-corner, #fff 50%, transparent 0%);
    background-size: 20px 20px;
    background-repeat: repeat-y;
}
.box:after{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;

    background: radial-gradient(farthest-corner, #fff 50%, transparent 0%);
    background-size: 20px 20px;
    background-repeat: repeat-y;
}

Answer 1

好像没办法做到完美的圆。不过你的截图上看其实是边缘太锐利造成的，可以简单改造一下让图形柔和一点，如下：

.box{
    position: relative;
    width: 300px;
    height: 140px;
    background: red;

}
.box:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 20px;

    background: radial-gradient(farthest-corner, #fff 50%, rgba(255, 255, 255, .5) 53%, rgba(255, 255, 255, 0) 0%);
    background-size: 20px 20px;
    background-repeat: repeat-y;
}
.box:after{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;

    background: radial-gradient(farthest-corner, #fff 50%, rgba(255, 255, 255, .5) 53%, rgba(255, 255, 255, 0) 0%);
    background-size: 20px 20px;
    background-repeat: repeat-y;
}