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

但是我在边境处遇到了一个尴尬的缝隙。如果打开按钮，这一点尤其明显。我试过抚摸边界，但这没有用。有谁知道解决这个问题吗？

BTW，此脚本适用于桌面应用程序，将通过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);
    }

我认为你最初的问题是图形渲染，特别是border-radius引入的舍入/消除干扰。当盒子是矩形时，它不存在。

使用box-shadow时沿按钮边框的尴尬间隙

1 个答案: