作者：放逐凌晨_690 | 来源：互联网 | 2023-09-13 11:25
设计师想出了这种类型的背景，如下图所示。我想避免使用图像背景。所以我想弄清楚是否可以使用CSS背景属性复制它。最低层只是一个线性梯度，没有问题。但是在其上分层的圆形形状并
设计师想出了这种类型的背景，如下图所示。我想避免使用图像背景。所以我想弄清楚是否可以使用 CSS 背景属性复制它。
最低层只是一个线性梯度，没有问题。但是在其上分层的圆形形状并不那么容易（如果可能的话）。
我的第一个想法是为圆形使用各种径向渐变，但正如您所看到的，这些形状具有线性填充，并且需要透明背景，以便圆形淡出。我看不出如何实现这一点，但我不是 CSS 专家，所以我想听听关于此的一些意见。
回答
掩码可以帮助您近似这一点
.box {
height:500px;
background:linear-gradient(135deg,#001f8e,#00fdcf);
position:relative;
}
.box:before {
content:"";
position:absolute;
inset:0;
background:linear-gradient(#00fdcf,#001f8e);
-webkit-mask:radial-gradient(circle 120px,#000 75%,#0000);
}
或带有模糊过滤器的基本圆形元素：
.box {
height:500px;
background:linear-gradient(135deg,#001f8e,#00fdcf);
position:relative;
}
.box:before {
content:"";
position:absolute;
inset:calc(50% - 100px) calc(50% - 100px);
background:linear-gradient(#00fdcf,#001f8e);
border-radius:50%;
filter:blur(10px);
}
京公网安备 11010802041100号