如何实现带圆角的outline-offset效果，为图片添加内圆角描边

问题描述 #

尝试为图片添加带圆角的内描边，但是使用outline-offset: -10px属性无法实现该效果，因为outline本身不支持圆角。目前通过添加绝对定位div的方式实现，相关代码如下：

<figure title="Ruleta en Vivo" class="container-juego"> 
 <a href="#" style="position: relative;">
    <div style="
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    display: block;
    border: 1px solid #FBC64D;
    position: absolute;
    left: 0;
    z-index: 5000;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 3px;
"></div>
 <img src="https://d1131w2enq9v80.cloudfront.net/img/logos/evolution/destacados/imagen_destacada-ruleta-en-vivo01.jpg" class="imgdestacada lazy loading" data-was-processed="true" style="">
 </a>
</figure>

div {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  display: block;
  border: 1px solid #FBC64D;
  position: absolute;
  left: 0;
  z-index: 5000;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 3px;
}

请问是否存在比上述方案更简便的实现方式？

解决方案 #

有两种更简便的实现方式，都不需要额外添加真实DOM节点，可维护性更高：

方案1：内阴影实现（最简方案） #

仅需给图片添加CSS样式即可，无需修改HTML结构，内阴影会自动适配圆角：

.imgdestacada {
  border-radius: 3px;
  /* 第一层透明阴影将描边向内推10px，第二层设置1px宽的目标色描边 */
  box-shadow: inset 0 0 0 10px transparent, inset 0 0 0 11px #FBC64D;
}

方案2：伪元素实现（灵活度更高） #

如果需要自定义描边的层级、点击穿透等属性，可以用父元素的伪元素实现，同样不需要修改HTML：

a {
  position: relative;
  display: inline-block;
  border-radius: 3px;
  overflow: hidden;
}
a::after {
  content: "";
  position: absolute;
  /* inset属性直接设置四个方向的偏移，等价于top/right/bottom/left都设为10px */
  inset: 10px;
  border: 1px solid #FBC64D;
  border-radius: 3px;
  pointer-events: none; /* 避免遮挡下方链接的点击事件 */
}

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