CSS3 эффект тени блока не работает в опере

У меня есть меню, которое использует эффекты 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, но не работает в опере, я понятия не имею, кто-нибудь может мне помочь с этим. Любая помощь очень ценится. Спасибо

Источник

3 ответа

Решение

Кажется, 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%;
}
Источник

Попробуйте этот код

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/

Источник

По словам 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/

Источник
Другие вопросы по тегам