Html 如何将多个css径向渐变应用于单个元素
我将以下样式应用于我的Html 如何将多个css径向渐变应用于单个元素,html,css,radial-gradients,Html,Css,Radial Gradients,我将以下样式应用于我的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(
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可以很容易地做到这一点,但我正在寻找一种跨浏览器的实现/替代方案
谢谢请用逗号分别创建
大概是这样的:
background-image: url(),url(), url();
当然,你可以用渐变代替url
所有现代浏览器都支持这一功能(也就是说IE不支持)
为了使其在IE中可用,您可以使用您只需依次列出它们-如下所示:
background: radial-gradient(top left,
rgb(205, 230, 235) 34%,
transparent 34%),
radial-gradient(center,
rgb(205, 230, 235) 34%,
transparent 34%);
您可以看到它在下工作。您必须将“径向渐变”的值设置为“透明”,以便让其他背景通过:
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%);
最好的方法是在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;
背景然后-大小和重复,否则它将无法工作。我花了大约30分钟才拿到。希望它能对某人有所帮助。谢谢Eric,这正是我所需要的。干杯虽然pie.htc不支持径向渐变,但这是一项很好的工作。谢谢,但我已经使用了rgba
值,而不仅仅是rgb
。a
部分是alpha,设置为0。上面的答案就是我想要的(即用逗号而不是多个css条目分隔它们)