代码之家 › 专栏 › 技术社区 › Igor Yavych

歌剧(旧版)中的盒子阴影在一个地方不能像预期的那样工作

opera cross-browser css

Igor Yavych · 技术社区 · 11 年前

我正在尝试用阴影制作间隔件,但遇到了奇怪的问题。它在旧的opera和opera next(新的opera)以及其他浏览器中看起来不同
老歌剧:
enter image description here

新opera(和其他浏览器):
enter image description here

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>

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

1 回复 | 直到 11 年前

alessandrio 11 年前

<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>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前