如何应用多个css径向渐变到单个元素 [英] How to apply multiple css radial gradients to a single element

问题描述

我将以下样式应用于我的 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 的底部应用相同的效果。下面这行很好，但它似乎重写了第一个，所以我只能得到一个或另一个。

 背景 - 图像：-moz-径向梯度（50％110％，椭圆最近角，rgba（5,5,5,0.7），rgba（0,0,0,0）100％）; 
  

有人可以告诉我如何为每个元素设置多个径向渐变背景？我注意到webkit可以轻松地做到这一点，但我正在寻找一个跨浏览器实现/替代。

感谢

有这样的东西：

  background-image：url（），url（），url（）; 
  

Ofcourse代替url，您可以放置​​渐变。

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

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

I have the following style applied to my div element:

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

This has the desired effect (being an inner drop shadow only at the top of the div). I would like to apply the same effect at the bottom of the div. The following line does it well, but it seems to override the first, so I can only get one or the other.

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

Can someone show me how I can have multiple radial gradient backgrounds per element? I notice that webkit can do this easily, but I'm looking for a cross browser implementation/alternative.

Thanks

解决方案

Just sepereate each one with a comma.

Something like this :

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

Ofcourse instead of url you can put gradient.

And all modern browsers support this feature ( meaning IE does not).

In order to make it available in IE, you can use pie.htc

这篇关于如何应用多个css径向渐变到单个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！