CSS同时使用外阴影与内阴影产生多余黑色轮廓，该如何去除？

你遇到的细黑轮廓是浏览器渲染半透明内外阴影时的常见现象，本质是元素背景为透明时，内外阴影交界位置的半透明像素和下方深色背景叠加产生的视觉断层，看起来就像黑色轮廓。你可以选择以下任意一种方法解决：

方法1：添加极低透明度的同色系背景（优先推荐） #

不需要修改原有阴影参数，仅添加几乎不可见的同色背景填充边缘断层即可，适配性最高，不会影响原有发光效果：

body {
  background:#1f1f1f;
  width:100px;
  margin:60px auto;
}

.inner {
  background-color: rgba(255, 242, 87, 0.02); /* 仅新增这一行 */
  width:200px;
  height:200px;
  border-radius:100px;
  box-shadow: 0 0 50px 50px rgba(255, 242, 87, 0.5), inset 0 0 30px 30px rgba(255, 242, 87, 0.5);
}

方法2：微调内阴影扩展半径 #

如果必须保留元素完全透明的背景，可以把内阴影的扩展半径调大1px，让内阴影稍微向外覆盖住边缘断层：

body {
  background:#1f1f1f;
  width:100px;
  margin:60px auto;
}

.inner {
  background-color:transparent;
  width:200px;
  height:200px;
  border-radius:100px;
  /* 仅把inset阴影的第四个参数从30px修改为31px */
  box-shadow: 0 0 50px 50px rgba(255, 242, 87, 0.5), inset 0 0 30px 31px rgba(255, 242, 87, 0.5);
}

方法3：添加同色系半透明边框 #

也可以加1px同色半透明边框直接盖住边缘，注意加box-sizing避免边框撑大元素尺寸：

body {
  background:#1f1f1f;
  width:100px;
  margin:60px auto;
}

.inner {
  background-color:transparent;
  width:200px;
  height:200px;
  border-radius:100px;
  border: 1px solid rgba(255, 242, 87, 0.1); /* 新增边框 */
  box-sizing: border-box; /* 避免元素尺寸变大 */
  box-shadow: 0 0 50px 50px rgba(255, 242, 87, 0.5), inset 0 0 30px 30px rgba(255, 242, 87, 0.5);
}

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