CSS3 effet d'ombre boîte ne fonctionne pas dans l'opéra

j'ai un menu qui utilise des effets CSS3 sur son vol stationnaire et le menu actif state.The ressemble à ce enter image description here CSS3 effet d'ombre boîte ne fonctionne pas dans l'opéra

Voici le style Css3 J'utilise

#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%; 


}

Cela fonctionne dans Firefox et Chrome, mais ne fonctionne pas dans l'opéra, je ne sais pas, quelqu'un peut-il m'aider avec cela.Toute aide est très appréciée. Merci

Source

2012-05-07 freebird

Quelle version d'Opera utilisez-vous? –

Utilisez-vous la dernière version de l'opéra (10.5+)? Il devrait soutenir le "box-shadow" régulier si c'est le cas. –

@ChuckNorris son 11.62 – freebird

Il semble Opera a besoin de l'élément de pseudo pour avoir une largeur et une hauteur (autre que 0px). Juste essayé le code suivant dans Opera 11.62 et il a semblé fonctionner.

#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%; 
}

Source

2012-05-07 07:17:17 magicalex

ya cela a fonctionné merci pour votre aide, mais un problème semble être là l'effet, je veux dire l'effet lumineux n'est pas bien positionné. toute aide pour cela – freebird

Avez-vous mis la position sur votre 'un 'element à' relatif'? – magicalex

ya, avez-vous remarqué l'effet que j'ai mentionné. – freebird

Essayez ce code

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); 
}

Pour plus d'informations, visitez: 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/

Source

2012-05-07 07:09:59

merci pour cela, mais comment puis-je l'utiliser pour mon menu – freebird

@freebird, vous pouvez trouver une solution pour tous les navigateurs croisés. utilisez-le dans votre css –

il utilise un div dans l'exemple que vous avez mentionné mais j'ai besoin de styliser mon tag. – freebird

Selon css3please, cela devrait fonctionner:

.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 */ 
}

Vérifiez si cela fonctionne dans votre opéra: http://css3please.com/

Source

2012-05-07 07:15:00 codef0rmer

CSS3 effet d'ombre boîte ne fonctionne pas dans l'opéra

Répondre

Questions connexes