如何为圆形图像设置阴影（css）

Question

我是 css 阴影的新手，我们可以为圆形图像设置阴影吗（我的意思是圆形图像）。

如果可能的话，请给我一个CSS代码。提前致谢

原文由 FreshBits 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

CSS3 box shadows 将阴影应用于元素，而不是元素的内容。换句话说，如果您有一个图像（矩形）但图像本身是一个圆形，则阴影将应用于矩形图像元素，而不是图像的实际主体。

更新：

当然，您始终可以使用 canvas 元素来玩转阴影。这是一个 jsFiddle 示例，它绘制一个圆并加载一个圆，然后对两者应用阴影效果。

原文由 j08691 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是不可能的，因为 CSS 不知道图像内容的形状（例如解释透明度）。你可以用 CSS3 做一个圆圈并给它一个阴影， 看这个 jsFiddle 。

 div {
    background: red;
    height: 100px;
    width: 100px;
    border-radius: 50px;
    margin: 20px;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
}

原文由 Frank van Wijk 发布，翻译遵循 CC BY-SA 3.0 许可协议