我有一个带有内部元素的按钮，该按钮可以接收盒子阴影：
button {
padding: 0;
border: 0;
margin: 0;
overflow: visible;
-webkit-appearance: none;
background: white;
}
.shadow {
display: inline-block;
vertical-align: middle;
height: 40px;
width: 40px;
border-radius: 20px;
background: #dddddd;
box-shadow: 0 0 20px black;
}<button>
<span class="shadow"></span>
<span>Some Text</span>
</button>
在Safari中，此阴影在<button>元素的边缘被切除，看起来像这样：
如您所见，我已经尝试过-webkit-appearance: none和overflow: visible。我还发现，如果将按钮更改为div，则不会发生此问题，但这是一个交互式元素，因此出于可访问性原因，这不是一个好主意。
在搜索此问题时，到目前为止，我没有找到太多帮助，但我想知道是否有人会知道任何近期的解决方法或Safari CSS hack可以帮助解决这个问题。