【问题标题】:box-shadow in opera (older) doesn't work as expected in one place歌剧(旧)中的 box-shadow 在一个地方无法按预期工作
【发布时间】:2014-03-23 16:20:13
【问题描述】:

我正在尝试用阴影制作垫片,但遇到了奇怪的问题。它在旧版 opera 和 opera next(新版 opera)和其他浏览器中看起来不同
老歌剧:

新Opera(和其他浏览器):

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>

知道为什么会发生这种情况以及如何解决吗?

【问题讨论】:

  • 什么版本的 Opera 是“旧 Opera”
  • 12.16,旧版 Opera 的最新版本
  • -o-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.7);

标签: css cross-browser opera


【解决方案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> 

【讨论】:

    猜你喜欢
    • 2016-12-22
    • 1970-01-01
    • 2021-10-07
    • 1970-01-01
    • 2022-06-22
    • 1970-01-01
    • 1970-01-01
    • 2017-04-17
    • 1970-01-01
    相关资源
    最近更新 更多