html - 波纹效果BoxShadow不显示吗？

我正在使用Fian的Waves产生波纹效果。问题是当我在'waves-circle'类的按钮中包含box-shadow属性时，它不显示任何阴影。

码

<style>
.button {
  background-color: Turquoise;
  border: none;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);

  outline: 0;
}
</style>

<button class="button waves">0</button>

<script>
Waves.attach('.waves', ['waves-circle']);
Waves.init();
</script>

现在，如果在“脚本”中添加“ waves-float”，它确实会出现阴影，但效果会超出其边界。我想要的是使用box-shadow属性将效果完全适合按钮的边框。

Waves.attach('.waves', ['waves-circle', 'waves-float']);

知道我在想什么吗？

谢谢

最佳答案

加：

class="waves-effect"

.waves-effect具有overflow: hidden;