0

在此处输入图像描述

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

我们可以在图像中看到的圆圈是我的徽标，它是具有 alpha 颜色背景的图像。
即使在 IE 中，阴影、边框等也能完美运行。

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

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

另一方面，我无法获得像图片上那样的边框。如你所知，

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

使用 Lloan Alas 给我的解决方案后，它运行良好，但不能在手机上运行，
​​我使用 dolphin 浏览器，这就是我得到的：
手机

这是我的代码：css:
#logo { margin-top: -100px; 高度：188px；宽度：300px；背景图像：url（“../imagenes/logo.png”）；边框：5px 纯白色；边界半径：50%；盒子阴影：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:
<div id="logo"></div>

4

2 回答 2

1

这是一个现场演示 - 如果有帮助，请告诉我！ 现场演示 JSBIN

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

于 2013-06-23T11:34:02.643 回答
1

我不太清楚您在寻找什么，但是如果您想为该椭圆添加阴影，您需要的是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属性...

于 2013-06-23T11:46:26.953 回答