Html 白色边框未显示（css）

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

所以，我想要的是我的图像有一个5px的白色（#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 */
}

看起来是这样的：

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

---

所以，现在的情况是边界比阴影的大小大

您当前的阴影声明，

box shadow:1px 1px 1px#ccc告诉
img
显示向左偏移1px、向上偏移1px、模糊量为1px、扩散量为1px的阴影

这很好，但是，您的
边框：5px纯白
声明大于2px总数。您需要增加阴影的大小

以下是一个例子：


img{
边框：5px纯白；
盒影：1px 1px 5px#ccc；
}
这很容易。使用您已经定义的所有其他属性向图像添加填充

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 */
}

我认为这与不透明度有关，但我不确定是否尝试添加5倍的填充。我相应地修改了它，但仍然没有显示边框，只是将其直接插入阴影。是上面css位的另一部分阻止了它吗？不透明度位置？边距？父元素上的样式是什么样的？它们是否具有设置的高度和宽度，且
溢出：隐藏设置它？此外，无位置、边距和不透明度也不会影响它。如果有的话，您可以添加
display:block到img声明，以重新调整其属性。就是这样！非常感谢你！