如何在 Elementor 中的图像上添加内嵌边框？

Question

在此处输入图像描述我在 Elementor 的容器内使用图像小部件，我想添加一个内嵌边框，边框周围有 24 像素的填充。我不想使用图像作为背景；我想使用图像小部件本身。

我想要实现的目标：

应将插入边框放置在图像内部（带有填充），以便图像从所有边的边框下方稍微伸出。

我尝试使用 ::before 伪元素来创建插入边框。这个想法是将边框放置在图像内部，周围有 24 像素的空间。我尝试使用顶部、左侧、右侧和底部属性来创建填充，但边框最终仍然延伸到容器之外，尤其是在右侧和底部。

我尝试添加盒阴影效果来模拟内嵌边框，但这并没有给我真正的内嵌边框效果。阴影在图像周围产生了模糊效果，但它没有提供我可以通过填充控制的坚实、定义的边框。

Answer 1

在 Html 结构中，在容器内使用 Image Widget，就像您已经拥有的那样。

在 CSS 中将样式应用于 Image Widget 和 ::before 伪元素以达到所需的效果。