css实现圆弧渐变效果

css实现圆弧渐变效果

css使用linear-griadient和border-radius实现向两边出现消失的渐变效果

效果展示：

HTML

CSS

    .main{
                width: 100%;
                height: 100px;
                background-color: rgba(23,13,62,1)
            }
            .center{
                width: 60%;
                height: 100px;
                margin: 0 auto;
                border-radius: 0 0 100% 100%;
                background: 
                linear-gradient(
                    0deg,
                    rgba(87,221,255, .5),
                    rgba(87,221,255, .3),
                    transparent,
                    transparent,
                    transparent,
                    transparent,
                    transparent
                ),
                linear-gradient(
                    90deg,
                    transparent,
                    transparent,
                    rgba(87,221,255, .1),
                    rgba(87,221,255, .1),
                    transparent,
                    transparent
                )
              
            }