如何实现圆形按钮渐变淡入阴影？解决阴影边界突兀或不可见问题

我尝试复刻某SaaS着陆页中文字周围的圆形按钮阴影效果，参考图显示按钮带有柔和的过渡阴影。我为按钮设置了径向渐变背景和box-shadow，但始终达不到预期效果：按钮边框与阴影之间要么存在生硬边界，要么阴影完全不可见。我的CSS代码如下：

button {
      background: radial-gradient(#ccdaf4, #dbe5f4,#f9fbff);
      box-shadow: 7px 7px 40px #f9fbff;
      width: 3rem;
      height:3rem;
      border:none;
      border-radius: 50%;
}

请问我哪里操作有误？

你的问题主要出在两个关键细节上：

• 阴影颜色与背景色重合：你使用的#f9fbff既是径向渐变的最终色值，又是阴影颜色，导致阴影和按钮背景完全融为一体，自然无法显现。参考效果的阴影应该是偏浅蓝调的柔和光晕，而非与背景同色的亮白色。
• 缺少内阴影配合：仅靠外阴影很难实现那种“按钮略带凹陷感+外围柔和光晕”的效果，需要结合inset内阴影模拟按钮的边界过渡，再搭配外阴影打造光晕。

调整后的CSS代码如下：

button {
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 50%;
  /* 优化渐变过渡，让边缘色值贴近容器背景，减少生硬感 */
  background: radial-gradient(circle at center, #ccdaf4, #dbe5f4, #e8effa);
  /* 内阴影模拟凹陷边界，外阴影打造柔和光晕，通过透明度控制过渡 */
  box-shadow: 
    inset 2px 2px 5px rgba(150, 180, 230, 0.2),
    3px 3px 15px rgba(180, 210, 255, 0.3);
}

额外优化提示：

• 如果按钮所在的容器有固定背景色，要让渐变的最后一个色值尽量接近容器背景色，这样外阴影的过渡会更自然，不会出现生硬的边界线。
• 可以通过调整阴影的rgba透明度、模糊半径（第三个数值）以及偏移量（前两个数值），精准控制阴影的柔和程度，多尝试几组数值就能匹配参考效果。

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