如何为单个元素应用多个CSS径向渐变

Question

我已经将以下样式应用于我的div元素：

background-image: -moz-radial-gradient(50% -10%, ellipse closest-corner, rgba(5, 5, 5, 0.7), rgba(0, 0, 0, 0) 100%);

这样做有所期望的效果（只在 div 顶部显示内部阴影）。我希望在 div 底部也应用相同的效果。以下代码可以实现，但它好像会覆盖第一个设置，因此我只能得到其中之一。

background-image: -moz-radial-gradient(50% 110%, ellipse closest-corner, rgba(5, 5, 5, 0.7), rgba(0, 0, 0, 0) 100%);

有人能展示一下如何在一个元素中使用多个径向渐变背景吗？我注意到webkit可以很容易地做到这一点，但我正在寻找跨浏览器的实现/替代方案。

谢谢

- hofnarwillie

Answer 1

最好的方法是在background属性中列出它们。但请记住，属性的顺序非常重要。

background:
    radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
    radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
    radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
    radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

必须先设置背景，然后再设置-size和-repeat，否则它将无法正常工作。我大约花了30分钟才弄明白。希望对某些人有所帮助。

- Alex Link

---

“background”属性是以下属性的缩写：背景颜色（background-color）、背景图片（background-image）、背景位置（background-position）、背景大小（background-size）、背景重复（background-repeat）、背景起源（background-origin）、背景剪裁（background-clip）和背景附着（background-attachment）。这就是为什么在您的示例中，您必须在“background”后放置“background-size”和“background-repeat”，以覆盖“background”的缩写。如果您使用“background-image”而不是“background”，则顺序将无关紧要。 - Mirha Masala

Answer 2

只需用逗号分隔每个选项。

像这样：

background-image: url(),url(), url();

当然，你可以使用渐变代替URL。

所有现代浏览器都支持此功能（意思是IE不支持）。

为了在IE中使用它，您可以使用pie.htc。

- eric.itzhak

---

谢谢Eric，这正是我所需要的。干杯。虽然pie.htc不支持径向渐变，但它是一个不错的作品。 - hofnarwillie

Answer 3

你只需要一个接一个地列出它们 - 就像这样：

html {
  height: 100%;
  background: 
    radial-gradient(closest-corner at 50% -10%, 
            rgba(5, 5, 5, .7), 
            transparent), 
    radial-gradient(closest-corner at 50% 110%, 
            rgba(5, 5, 5, .7), 
            transparent);
}

- Ana

---

链接已经失效了。你能不能做一个 Codepen？ - Frank Conijn - Support Ukraine

这里制作了一个小片段。 - Ana

Answer 4

要让其他背景透过来，您需要将径向渐变的值设置为透明：

您必须将径向渐变的值设置为透明，以便让其他背景透过来：

   background-image: radial-gradient(closest-corner at 40% 70%,#FFFFFF 0%, rgb(171,171,171),50%,transparent),
                     radial-gradient(closest-corner circle at 80% 20%, #FFFFFF 0%, rgb(171,171,171),20%,transparent),
                     radial-gradient(closest-corner circle at 10% 10%, #FFFFFF 0%,rgb(171,171,171) 25%);

- wattry

---

谢谢，但我已经通过使用rgba值而不是仅使用rgb来实现。 a部分是alpha，设置为0。上面的答案正是我要找的（即通过逗号将它们分开而不是多个CSS条目）。 - hofnarwillie