如何使用渐变和阴影在底部创建带圆圈的背景

Question

任何人都可以帮助我实现此标题布局而不使用阴影图像吗？

Answer 1

这不是不可能实现的CSS。您只需要查看该图像的不同层，然后使用background-image重新创建每个图层。该图像有三个不同的层。最底层是一个倾斜的线性渐变，从较暗的蓝色到较浅的颜色（从左下角到右上角）。第二个是圆形放射状渐变，通过在底层顶部叠加从白色到透明的渐变产生辉光，第三种是产生灰色阴影的另一径向渐变（椭圆）。通过创建图层并将它们添加到元素中，我们可以获得所需的输出。

形状的弯曲底部可以通过使用在X和Y轴上具有不同半径的border-radius来生成。

.shape { 
 
    position: relative; 
 
    height: 200px; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 
.shape:after { 
 
    position: absolute; 
 
    content: ''; 
 
    width: 110%; 
 
    height: 100%; 
 
    left: -5%; 
 
    border-radius: 0% 0% 150% 150%/0% 0% 60% 60%; 
 
    background: radial-gradient(ellipse at 50% 160%, rgba(127, 127, 127, 0.75), rgba(127, 127, 127, 0) 40%), radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 40%), linear-gradient(45deg, rgb(43, 149, 241), rgb(136, 208, 249)); 
 
    background-size: 100% 40%, 100% 100%, 100% 100%; 
 
    background-position: 0% 100%, 0% 0%, 0% 0%; 
 
    background-repeat: no-repeat; 
 
} 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<div class='shape'></div>