如何将多个CSS径向渐变应用到单个元素(How to apply multiple css radi

我已经应用到我的以下风格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可以很容易地做到这一点，但我正在寻找一个跨浏览器的实现/替代。

谢谢

Answer 1:

只是sepereate每一个用逗号。

事情是这样的：

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

Ofcourse，而非网址，你可以把梯度。

和所有现代浏览器都支持此功能（这意味着IE没有）。

为了使其在IE可用时，您可以使用pie.htc

Answer 2:

你只需列出他们一前一后 - 就像这样：

background: radial-gradient(top left, 
            rgb(205, 230, 235) 34%, 
            transparent 34%), 
        radial-gradient(center, 
            rgb(205, 230, 235) 34%, 
            transparent 34%);

你可以看到它在工作http://dabblet.com/gist/2759668

Answer 3:

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

   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%);

Answer 4:

要做到这一点，最好的办法是将它们列在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分钟得到它。 希望这将是为别人有用。

文章来源: How to apply multiple css radial gradients to a single element