我有一个菜单,在其悬停和活动状态下使用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中不起作用,我不知道,任何人都可以帮我解决这个问题。非常感谢任何帮助。 感谢
答案 0 :(得分:2)
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%;
}
答案 1 :(得分:1)
试试此代码
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 :(得分:0)
根据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/