尷尬的差距使用的box-shadow

Question

時，我使用的CSS的box-shadow工作再上一個圓形按鈕內部和外部光暈：

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); 
    } 

但我正在逐漸在邊界處一個尷尬的縫隙。如果按鈕處於打開狀態，這一點尤其明顯。我嘗試過撫摸邊框，但這沒有幫助。有沒有人知道這個問題的解決辦法？

順便說一下，這個腳本是爲桌面應用程序，將通過電子固定在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); 
    } 

我認爲你原來的問題在於圖形渲染，特別是由邊界半徑引入的舍入/反褶積毛刺。盒子爲矩形時不存在。