html - 如何将多个 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 可以轻松做到这一点，但我正在寻找跨浏览器实现/替代方案。

谢谢

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;

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