如何在Elementor的Image Widget中添加带24px内边距的内凹边框？

直接给目标Image Widget添加自定义CSS即可实现需求，无需将图片设为背景：

1. 在Elementor编辑器中选中需要设置的Image Widget，切换到「高级」标签页，找到「自定义CSS」输入框。
2. 粘贴以下代码：

.elementor-widget-image {
  position: relative;
}

.elementor-widget-image::before {
  content: "";
  position: absolute;
  inset: 24px; /* 控制内凹边框与图片边缘的间距 */
  border: 2px solid #333; /* 自定义边框颜色、粗细 */
  z-index: 2; /* 让边框显示在图片上方，实现图片边缘突出效果 */
}

.elementor-widget-image img {
  width: 100%;
  height: auto;
  display: block;
}

代码说明 #

• 给Image Widget容器设置position: relative，确保伪元素（边框）基于该容器定位，解决你之前遇到的边框超出容器问题。
• inset: 24px 直接定义伪元素上下左右向内偏移24px，精准控制内凹间距。
• z-index: 2 让边框层级高于图片，这样图片的四个侧边会自然从边框下方露出来，符合你的预期效果。
• 给img设置display: block和width: 100%，确保图片占满容器，避免出现空隙。

如果需要调整边框样式，直接修改border属性即可（比如改成dashed虚线边框）；要改变内凹距离，修改inset的数值就行。

内容的提问来源于stack exchange，提问作者BigBadWolf