html - 内部透明边框

Question

我想使用 CSS 在图像周围设置透明边框。我找不到任何方法来做到这一点。

这里是 link对于我的具有透明内部边框效果的图像。

Answer 1

这不是一件容易的事，因为图像是替换元素并且有很多限制(伪元素不起作用，插入框阴影不起作用，...)。

你有几个选项(可能还有更多，我只列出两个):

解决方案 1:使您的图像成为普通 div 的背景图像并应用边框 - 此边框将自动与图像重叠。顺便说一句，您可以使用 background-clip 和 background-origin 来改变这种行为。
问题:您需要知道图像的尺寸，以相应地调整 div 的大小。

解决方案 2:将图像包装到另一个元素中，并声明一个应用边框的伪元素。重要的是 img 上的 display:block 和 wrapper 元素上的 position:relative。

Example fiddle