CSS - 如何将圆形阴影应用于圆形图像

Question

这是我简单的CSS代码：

header img {
    box-shadow: 0 0 40px 5px #CCC ; 

}

这看起来像这样：

我的logo.png已完成了photoshop：http://s8.postimg.org/3ws8ehaud/logo_easyjobs.png

Answer 1

将border-radius:50%应用于您的图片，它应该看起来一样并修复您的阴影。但看起来您的圆形图像与图像边缘不完美对齐（它们在顶部和侧面是额外的透明空间）。因此，您需要对其进行编辑，使其更加完美地与画布边缘对齐。

Answer 2

试试THIS。希望这可以帮助。我使用border-radius来制作div。

CSS：

.header {
    width: 150px;
    height: 150px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background: url(http://s8.postimg.org/3ws8ehaud/logo_easyjobs.png) no-repeat center center;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}

Answer 3

这里有一些代码：

<强> HTML

<div>
    <img src="http://s8.postimg.org/3ws8ehaud/logo_easyjobs.png" />
</div>

<强> CSS

img {
    border-radius:50%;
    -moz-border-radius:50%;
    width:185px;
    height:170px;
    box-shadow:10px 10px 3px rgba(0,0,0,.5);
}

和jsfiddle：http://jsfiddle.net/fQY2h/1/