CSS 盒阴影和外边距

Question

我在博客文章中给<img>添加了CSS的box-shadow。这些图像设置了max-width:100%，以便在调整大小时填充列。

由于CSS盒模型中的box-shadow是在边框外呈现的，因此阴影会溢出到边缘。我想给图片添加一些额外的空白间距，以使阴影位于列内部。但是，如果我使用margin，这将使图像比列更宽。

有没有好的方法可以让阴影位于内部，而不影响上述宽度？ 想到过将其包装在另一个元素中，但做这样的事情很糟糕。

如果我使用实心边框，我可以使用box-sizing:border-box;来实现这一点，但它对box-shadow没有影响？

- MachineElf

---

将来您将能够使用 calc(...)：https://developer.mozilla.org/zh-CN/docs/Web/CSS/-moz-calc - biziclop

太棒了！有一些非常棒的东西正在开发中，比如HTML5naturalWidth和naturalHeight值，可以获取图像的真实尺寸:-) - MachineElf

Answer 1

最大宽度为98％或略低，阴影应该在内部。

- Moin Zaman

---

我喜欢那个想法，但如果可能的话，像素精度会更完美！ - MachineElf

我想不到其他的了。将其包装在另一个元素中会给您更多的控制。 - Moin Zaman

也许可以用百分比大小创建一个阴影？ - Inkbug