问题标签 [drop-shadow]

我已经查看了这里的其他答案，但一直遇到同样的问题，我对 webdev 也很陌生。

我试图创建一个<div>宽度为 960 像素的封装整个页面，然后为其添加阴影。

每当我尝试其他人发布的解决方案时，所发生的只是阴影应用于页面顶部的徽标图像但没有其他地方，即阴影不会继续超过徽标并封装导航栏，内容等。这是我的代码；

这是CSS；

谁能看到我哪里出错了？

我有两个具有相同阴影效果的 div，但结果不同。阴影效果在 header div 上显得更亮，这是为什么呢？

有没有办法不在彼此之上应用多个阴影？我正在尝试使用阴影来模拟元素周围的笔触。我需要使用投影，因为当我们有蒙版或带有透明点的图像时我需要它来工作，而我找不到另一种方法来完成同样的事情。使用背景颜色的另一种选择不适用于具有透明度的 png 图像。

问题是，例如，当我为左侧和顶部定义投影时，实际上并没有很好地重叠，而是将额外的投影应用到有重叠的元素上。这最终得到平坦的边缘，而不是像他们应该的那样的圆形边缘。请注意，虽然这是一个圆形图像，但我们允许用户定义自己的蒙版并上传 png，因此它几乎可以是任何形状。

这是问题的 jsfiddle 示例：https ://jsfiddle.net/a67fqne2/17/

代码本身：

代码笔示例

当您将鼠标悬停在 Chrome 中的徽标上时，动画会起作用。

当您将鼠标悬停在 Firefox 中的徽标上时，它会在“mouseout”上启动动画（不使用 Javascript，但这就是效果）。

为什么 Firefox 在悬停在 SVG 上时不触发 CSS 更改？

先感谢您。

为了在自定义形状周围创建阴影，我发现了阴影滤镜 CSS 属性。然而，在实施它之后，我意识到它大大降低了网站的速度。

因此，我正在寻找一种替代方案，以在不影响页面加载速度的情况下获得相同的效果。

该站点的主要内容被一个使用盒子阴影的阴影盒子包装器包围，但是由于背景的透明部分，这不能用于结尾部分。

我正在尝试实现类似于阴影盒阴影的阴影。

这是一个jsFiddle，说明了它当前的外观

在这里可以在真实网站上看到

HTML

CSS