如何将径向渐变CSS的大小定义为百分比？

Question

我们如何以百分比而不是像素来定义径向渐变的大小？

radial-gradient(circle 300px at 5% 20%, red, blue 100%)

我希望渐变适应其容器的大小，而不是固定在像素中，但这种语法不起作用：

radial-gradient(circle 30% at 5% 20%, red, blue 100%)

大家有解决办法吗？

Answer 1

使用

ellipse

而不是

circle

。您可以使用百分比来表示。如果宽度和高度相同，就会得到一个圆。

background: radial-gradient(ellipse 30% 30% at 5% 20%, red, blue 100%);