图像阴影css3

Question

这是我网站草图的顶部，我在HTML编辑器中完成了这个。

我们在图像中可以看到的圆圈是我的徽标，它是带有阿尔法颜色背景的图像 即使在IE中，阴影，边框等也能正常工作。

现在我正在尝试用HTML5和CSS3做类似的事情但是我在图像阴影和边框方面遇到了很多问题。

box-shadow不起作用，因为它是一个方形图像（记住它是带有alpha颜色背景的图像）
我发现图像阴影的最后一件事是filter：drop-shadow。理论上它应该适用于所有浏览器，但它只适用于chrome。

另一方面，我不能得到像图片上那样的边框。如您所知，我的徽标是带有alpha颜色背景的图像，它总是形成方形边框。

任何人都可以给我一些帮助。我会很感激。 Thanxs

<小时/> 在使用解决方案之后，Lloan Alas给了我它完美的工作但不是在手机上 我使用dolphin浏览器，这就是我得到的：


这是我的代码：css：
    ＃商标 {     margin-top：-100px;     身高：188px;     宽度：300px;     background-image：url（“../ imagenes / logo.png”）;     边框：5px纯白色;     border-radius：50％;     box-shadow：0 10px 15px＃000;     -moz-box-shadow：0 10px 15px＃000;     -webkit-box-shadow：0 10px 15px＃000;     -ms-box-shadow：0 10px 15px＃000;     -o-box-shadow：0 10px 15px＃000;     -khtml-box-shadow：0 10px 15px＃000; }

HTML：
    ＆lt; div id =“logo”＆gt;＆lt; / div＆gt;

Answer 1

这是一个现场演示 - 让我知道它是否有帮助！ LIVE DEMO JSBIN

兼容IE 9-10，Firefox，Safari和Opera。 （据说）

Answer 2

我找不到你想要的东西，但如果你想为那个椭圆增加一个阴影，你需要的是box-shadow，如你所知 用途是：

box-shadow: horizontal-shadow-position v-shadow-pos blur spread color inset;

您可以省略某个属性但不能更改其顺序。

所以例如你的影子就像

box-shadow: 3px 3px 8px 2px #666;

因为不插入。

此外，为了能够在更多浏览器中使用它，您需要浏览器前缀，例如

box-shadow:         3px 3px 8px 2px #666; /*Firefox (and new versions of Opera)*/
-o-box-shadow:      3px 3px 8px 2px #666; /*Opera*/
-ms-box-shadow:     3px 3px 8px 2px #666; /*Internet Explorer*/
-webkit-box-shadow: 3px 3px 8px 2px #666; /*Webkit: Safari, Chrome, Chromium...*/

此外，请记住，您提到的alpha-filter只相当于 Firefox，Chrome，Opera等的opacity属性...