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

【问题标题】：CSS - How to apply box-shadow to a image roundedCSS - 如何将框阴影应用于圆形图像
【发布时间】：2014-05-20 00:11:56
【问题描述】：

这是我的简单 CSS 代码：

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

}

看起来像这样：

我的logo.png 用 photoshop 进行了四舍五入：http://s8.postimg.org/3ws8ehaud/logo_easyjobs.png

【问题讨论】：

你的图片实际上并没有在 CSS 中四舍五入，要四舍五入你必须使用border-radius:50%

标签： css image shadow

【解决方案1】：

试试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);
}

【讨论】：

【解决方案2】：

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

【讨论】：

那么我们可以将img的background设置为white，这将用white填充透明区域，我们有一种像@987654321那样真正圆润的图像的感觉@
将背景设置为白色，好主意。它适用于您的徽标。

【解决方案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/

【讨论】：