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

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>

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

How to create circled background at the bottom with gradient and shadow

html

css

css-shapes