我太懂你遇到的这个头疼的小问题了——给圆形元素加了50%圆角后，hover时用inset box-shadow模拟视觉缩小，结果边缘出现了一圈莫名其妙的细边框，换成方形元素就完全正常。这其实是浏览器在渲染圆角和大尺寸内阴影时的一个渲染bug，不过有几个靠谱的解决办法：

方法一：用伪元素模拟视觉缩小效果（最稳定） #

这个方法绕开了box-shadow的渲染问题，通过缩放伪元素来实现同样的视觉效果，兼容性和表现都很完美：

:root { --border-width: 10px; }
body { background: black; }
.rreth {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: relative;
  overflow: hidden; /* 关键：把伪元素超出的部分藏起来 */
  transition: all 0.2s ease;
}
.rreth::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: pink;
  border-radius: 50%; /* 和父元素保持一致的圆角 */
  transition: transform 0.2s ease;
}
.rreth:hover::before {
  transform: scale(0.7); /* 缩放比例对应原来30px内阴影的视觉效果 */
}

原理很简单：父元素负责保持圆形的容器，伪元素作为实际的粉色圆形，hover时缩小它，就达到了“视觉上缩小但实际尺寸不变”的效果，完全不会有细边框的问题。

方法二：给内阴影加极小的模糊值（快速修复） #

如果你还是想用box-shadow的方案，只需要给inset阴影加个0.1px的模糊，就能让浏览器的渲染平滑过渡，消除那圈细边框：

.rreth:hover {
  box-shadow: 0px 0px 0.1px 30px black inset;
}

这个小技巧利用了浏览器对模糊阴影的渲染逻辑，让圆角边缘的像素对齐更自然，轻松解决bug。

方法三：用outline + 负偏移（你试过的方案优化版） #

你之前注释掉的outline其实是个好思路，调整参数后就能完美实现需求，而且不会有渲染问题：

.rreth {
  width: 200px;
  height: 200px;
  background-color: pink;
  border-radius: 50%;
  transition: all 0.2s ease;
  outline: 0 solid black;
  outline-offset: 0;
}
.rreth:hover {
  outline: 30px solid black;
  outline-offset: -30px;
}

outline不会占用元素的盒模型空间，负的outline-offset能让它向内延伸，完美模拟内边框的效果，圆角渲染也完全正常。

以上三个方法都能解决你的问题，个人最推荐伪元素的方案，因为它的表现最稳定，在各种浏览器里都不会出幺蛾子。

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