使用框阴影时，沿按钮边界的尴尬间隙

Question

我在CSS中使用框阴影来获得圆形按钮上的内部和外部发光：

http://codepen.io/interwebjill/pen/mVbXyW

   .button-outer {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        box-shadow: 0px 0px 25px 10px rgba(255, 255, 255, .50);
        position: absolute;
    }
    .button-inner {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        box-shadow: inset 0px 0px 25px 15px rgba(255, 255, 255, .45);
        position: absolute;
    }
    .card.activate {
        box-shadow: 0px 0px 25px 15px rgba(255, 255, 255, 0.75);
    }
    .button-inner.activate {
        box-shadow: inset 0px 0px 25px 15px rgba(255, 255, 255, 1);
    }
    .button-outer.activate {
        box-shadow: 0px 0px 25px 15px rgba(255, 255, 255, 1);
    }

但我在边界处有一条缝。如果按钮打开，这一点尤其明显。我试过抚摸边界，但无济于事。有人知道解决这个问题的办法吗？

顺便说一句，这个脚本是为桌面应用程序编写的，将通过Electron在Chromium中修复。所以最好在Chrome浏览器中查看。

Answer 1

我建议使用单个元素作为按钮，并对其应用多个框阴影：您描述的问题可以通过两个具有最小扩散和半径的附加小阴影来掩盖：http://codepen.io/myf/pen/PZYQxB?editors=010

 .button {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        box-shadow:
          0px 0px 25px 10px rgba(255, 255, 255, .50),
          inset 0px 0px 25px 15px rgba(255, 255, 255, .45),
          0px 0px 1px 0px rgba(255, 255, 255, .1),
          inset 0px 0px 1px 0px rgba(255, 255, 255, .1);
    }
    .button.activate {
        box-shadow:
          0px 0px 25px 15px rgba(255, 255, 255, 1),
          inset 0px 0px 25px 15px rgba(255, 255, 255, 1),
          0px 0px 0px 1px rgba(255, 255, 255, 1),
          inset 0px 0px 0px 1px rgba(255, 255, 255, 1);
    } 

我认为你最初的问题是图形渲染，特别是边界半径带来的圆角/抗锯齿问题。当长方体为矩形时，它不存在。