如何设置圆形图像的阴影(css)

Question

我是css中的新影,我们可以为圆形图像设置阴影(我的意思是圆形图像).

如果有可能,请在css中给我一个代码.提前致谢

Answer 1

这是不可能的,因为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);
}

Answer 2

是的，只需在您的图像中添加一个 border-radius: 50% 以及 box shadow 属性:) 在我的 img 标签中工作。

Answer 3

阴影与css中的形状无关,您可以在创建圆后使用阴影属性.您可以使用以下代码,它应该可以正常工作

.circle{ 
   width:150px;height:150px;
   border: solid 1px #555;
   background-color: #eed;
   box-shadow: 10px -10px rgba(0,0,0,0.6);
   -moz-box-shadow: 10px -10px rgba(0,0,0,0.6);
   -webkit-box-shadow: 10px -10px rgba(0,0,0,0.6); 
   -o-box-shadow: 10px -10px rgba(0,0,0,0.6);
   border-radius:100px;
} 

Answer 4

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

更新：

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