如何确保CSS边框在图像内部显示

Question

我有一些用Photoshop添加的带边框的图片，但这些边框很脏。为了不再使用Photoshop重复这些操作（无法使用脚本，因为几乎每个图片都太具体化），我想覆盖掉这些边框。因为我的客户给了我大约15000张有这个错误的图片。

然后，我考虑了css边框。那么，如何使图像周围的边框填充其中？这是可能的吗？你有更好的想法吗？

编辑：

以下是对我的情况没有用的想法：

1. css属性：border-style：inset（无论如何感谢Abdul Basit） 2. css属性：clip 提前感谢您。

- KeizerBridge

Answer 1

您可以设置插入边框。

   border-style: inset;

可以添加一个宽度，覆盖所有边框的大约范围。

    border-width: 5px;

或者您可以将图像用作所有边框。

- A.B

---

谢谢你分享你的想法，我之前尝试过了，但是边框有这种斜角/压花脏效果。而且它并没有像我希望的那样填充图像。 - KeizerBridge

Answer 2

你可以使用带有inset的box-shadow来模拟边框。但是，box-shadow不能直接在图像元素上工作，因为它会呈现在后面。
你可以通过创建一个带有box-shadow的.image-wrapper类来解决这个问题。
要使此阴影呈现在图像前面，只需将z-index设置为-1即可。

* { box-sizing: border-box; }

.img-wrapper {
    box-shadow: inset 0 0 0 20px red; // Fake border on the inside
    display: block;
    margin: 50px auto;
    width: 90%;
}

.img-wrapper img {
    display: block;
    position: relative;
    width: 100%;
    z-index: -1; // Render the image behind the box-shadow
}

演示

- JimmyRare