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

Question

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

Answer 1

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

形状的弯曲底部可以通过在X轴和Y轴上使用不同半径的.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>

{{1}}