6

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

谢谢

4

4 回答 4

5

只需用逗号分隔每个。

像这样的东西：

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

当然，您可以放置​​渐变而不是 url。

并且所有现代浏览器都支持此功能（意味着 IE 不支持）。

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

于 2012-05-20T21:41:40.977 回答
5

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

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看到它的工作原理

于 2012-05-20T21:49:31.160 回答
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;

background 然后 -size 和 -repeat，否则它将不起作用。我花了大约 30 分钟才拿到它。希望它对某人有所帮助。

于 2018-08-13T11:06:32.410 回答
1

您必须将径向渐变的值设置为透明才能让其他背景通过：

   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%);
于 2013-08-30T11:20:02.253 回答