白色边框没有显示（css）

Question

我在UX上试过这个，显然这是错误的地方，所有回答的人都误解了这个问题。

所以，我想要的是我的图像有5px WHITE（#fff）边框，阴影从边框掉落。我已经在某个地方看到了它，阅读它，但由于某种原因，我的代码无法正常工作。我所看到的只是img和影子。两者之间没有边界。

这就是我所拥有的：

    img {
        border: 5px solid #fff;
        margin: 5px;
        position:relative;
        -webkit-box-shadow: 1px 1px 1px 1px #ccc;
        -moz-box-shadow: 1px 1px 1px 1px #ccc;
        box-shadow: 1px 1px 1px 1px #ccc;
            opacity: 0.5;
         filter: alpha(opacity=50); /* For IE8 and earlier */
}

看起来像这样：

但我希望它看起来像这样：

Answer 1

这很容易。使用已定义的所有其他属性

添加填充到图像

img {
        border: 5px solid #fff;
        margin: 5px;
        padding: 5px;
        position:relative;
        -webkit-box-shadow: 1px 1px 1px 1px #ccc;
        -moz-box-shadow: 1px 1px 1px 1px #ccc;
        box-shadow: 1px 1px 1px 1px #ccc;
            opacity: 0.5;
         filter: alpha(opacity=50); /* For IE8 and earlier */
}

Answer 2

所以，发生的事情是边界大于阴影的大小。

你当前的影子宣言box-shadow: 1px 1px 1px 1px #ccc;告诉img显示一个向左偏移1px的影子，偏移1px到顶部，有1px的模糊量，以及1px的差异

这没关系，但是，border: 5px solid white声明大于2px总数。你需要增加阴影的大小。

以下是一个例子：

img {
  border: 5px solid white;
  box-shadow: 1px 1px 5px #ccc;
}

<img src="http://placehold.it/200x200">