如何制作轮廓偏移半径答案

【问题标题】：How to make outline offset radius如何制作轮廓偏移半径
【发布时间】：2021-12-29 10:48:45
【问题描述】：

我试图在 img 内绘制一个半径角的边框，但我不能使用适当的“轮廓偏移：-10px”来做到这一点，因为角不是半径。

我正在尝试使用具有这些属性的绝对 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;
}

还有比这更简单的方法吗？

结果是这样的： Result

【问题讨论】：

无论如何我都会避免在边框上使用轮廓，因为它会影响可访问性。如果您可以为minimal reproducible example 提供 HTML，将会很有帮助。
请不要只显示 CSS 代码，没有它应该适用的 HTML - 这告诉我们很少。根据实际结构，这应该可以在没有明确计算宽度和高度的情况下工作，也不需要应用任何平移。（如果您在图像周围有一个包装器元素，与图像具有相同的宽度和高度，并且使用position:relative，那么您可以简单地使用20px 绝对定位图像的兄弟姐妹为上/下/左/右，并且根本不需要指定宽度和高度。）

标签： html css

【解决方案1】：

在css文件中添加以下代码。

img {
     outline: 1px solid #FBC64D;
     outline-offset: -10px;
}

【讨论】：

缺少边界半径。（这就是为什么他们已经提前说使用轮廓偏移对他们不起作用。）
参考这个stackoverflow.com/questions/5394116/outline-radius
有什么用？据我所知，那里的解决方案都没有使用outline-offset。

【解决方案2】：

您可以将after 添加到容器中，将其放在顶部并提供您想要的大小和属性：

div {
  position:relative;
  display:inline-block;
}
div:after {
  content:'';
  border: 1px solid #FBC64D;
  border-radius: 3px;
  display:block;
  height:calc(100% - 20px);
  width:calc(100% - 20px);
  position:absolute;
  top:10px;
  left:10px;
}

<div>
<img src="https://d1131w2enq9v80.cloudfront.net/img/logos/evolution/destacados/imagen_destacada-ruleta-en-vivo01.jpg" alt="">
</div>

【讨论】：