歌剧中的box-shadow（旧版）在一个地方没有按预期工作

Question

我试图用阴影制作间隔物并遇到奇怪的问题。它在旧歌剧和歌剧院（新歌剧院）和其他浏览器中的外观不同 老歌剧：

新歌剧（和其他浏览器）：

Css代码：

.spacer {
    width: 400px;
    position: relative;
}

.mask {
    overflow: hidden;
    height: 20px;
    margin-top: 5px;
}

 .mask:after {
    content: '';
    display: block;
    margin: -25px auto 0;
    width: 100%;
    height: 25px;
    border-radius: 125px / 12px;
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.7);
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.702);
}

Html代码：
     <div class="spacer"> <div class="mask"></div></div>

知道为什么会这样，以及如何解决它？

Answer 1

<div class="spacer"><div class="mask"></div></div>

css所有浏览器

<style type="text/css">
    .spacer {
    width: 400px;
    position: relative;
}

.mask {
    margin-top: 5px;
    height: 20px;
    overflow: hidden;
}

 .mask:after {
    content: '';
    display: block;
    margin: -32px auto 0 auto;
    width: 100%;
    height: 30px;
    border-radius: 50% / 20px;
    box-shadow: 0 0 10px 6px #202020;
    -moz-box-shadow: 0 0 10px 6px gray;
}
</style>