【问题标题】:CSS3 box shadow effect not working in operaCSS3盒子阴影效果在Opera中不起作用
【发布时间】:2012-05-07 06:17:00
【问题描述】:

我有一个在悬停和活动状态上使用 Css3 效果的菜单。菜单看起来像这样

这是我使用的 Css3 样式

#Menu a:active,
#Menu a.active:before,#Menu a:hover:before
{
    Content: ' ';
    position:absolute;
    z-index:51;
    width:0px;
    height:0px;
    left:50%;
    top:50%;
    box-shadow:0 0 35px 30px #ADD7E7;
    -moz-box-shadow:0 0 35px 30px  #ADD7E7;
    -webkit-box-shadow:0 0 35px 30px  #ADD7E7;
    border-radius:50%;


}

这在 Firefox 和 Chrome 中有效,但在 opera 中无效,我不知道,任何人都可以帮助我解决这个问题。非常感谢任何帮助。 谢谢

【问题讨论】:

  • 您使用的是哪个版本的 Opera?
  • 您使用的是最新版本的opera(10.5+)吗?如果是这样,它应该支持常规的“box-shadow”。

标签: css opera


【解决方案1】:

似乎 Opera 需要伪元素具有宽度和高度(0px 除外)。 刚刚在 Opera 11.62 中尝试了以下代码,它似乎可以工作。

#Menu a:active,
#Menu a.active:before,#Menu a:hover:before
{
    Content: '';
    position:absolute;
    z-index:51;
    width:1px;
    height:1px;
    left:50%;
    top:50%;
    background: #ADD7E7;
    box-shadow:0 0 35px 30px #ADD7E7;
    -moz-box-shadow:0 0 35px 30px  #ADD7E7;
    -o-box-shadow:0 0 35px 30px  #ADD7E7;
    border-radius:50%;
}

【讨论】:

  • 是的,谢谢你的帮助,但效果似乎有问题,我的意思是发光效果没有很好地定位。任何帮助
  • 您是否将a 元素上的位置设置为relative
  • 是的,你注意到我提到的效果了吗。
  • 知道了,我的 li 元素的位置我将它设置为相对而不是我的 a 元素,它对我有用,非常感谢。如果可能的话,你能帮我吗stackoverflow.com/questions/10477175/…
【解决方案2】:

试试这个代码

HTML

<div class="shadow-bringer shadow"> HI ! Welcome. </div>

CSS

.shadow-bringer {
    background: none repeat scroll 0 0 #FFFFA2;
    height: 100px;
    margin: 20px auto;
    padding: 5px;
    width: 100px;
}
.shadow {
    box-shadow: 0 0 8px #CCCCCC;
    -moz-box-shadow: 0px 0px 8px #ccc;/* for mozila*/
-webkit-box-shadow: 0px 0px 8px #ccc;
    /* For IE upto 5.5 not for 9*/
filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=45, Strength=3)
progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=135, Strength=3)
progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=225, Strength=3)
progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction=315, Strength=3);
}

欲了解更多信息,请访问: 1.http://webdesignergeeks.com/tutorials/html-css-tutorials/cross-browser-drop-shadow-for-all-side/

2.http://css-tricks.com/snippets/css/css-box-shadow/

【讨论】:

  • @freebird 你可以找到所有跨浏览器的修复。在你的 CSS 中使用它
  • 它在您提到的示例中使用了 div,但我需要设置我的 a 标签的样式。
  • @freebird 我认为你的 css 代码非常适合歌剧影子,你使用的是哪个版本的歌剧?
  • 它的 11.62 ,我该怎么做才能做到这一点
  • @freebird 你能在这个页面上看到阴影吗css-tricks.com/snippets/css/css-box-shadow,如果是,那么你的 css 代码可能有问题,如果不是,那么你的浏览器问题
【解决方案3】:

根据 css3please,这应该可以工作:

.box_shadow {
  -webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  box-shadow: 0px 0px 4px 0px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}

检查这是否适用于您的歌剧:http://css3please.com/

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-03-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多