CSS - Comment appliquer box-shadow à une image arrondie

Question

Voici mon code simple CSS:

header img { 
    box-shadow: 0 0 40px 5px #CCC ; 

} 

Ce ressembler à ceci:

Mon logo.png a été arrondi avec photoshop: http://s8.postimg.org/3ws8ehaud/logo_easyjobs.png

Answer 1

Essayez THIS. J'espère que cela t'aides. J'ai utilisé border-radius pour faire le tour div.

CSS:

.header { 
    width: 150px; 
    height: 150px; 
    border-radius: 150px; 
    -webkit-border-radius: 150px; 
    -moz-border-radius: 150px; 
    background: url(http://s8.postimg.org/3ws8ehaud/logo_easyjobs.png) no-repeat center center; 
    box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
} 

Answer 2

Appliquer border-radius:50% à votre image, il devrait être à peu près le même et corriger votre ombre. Mais il semble que votre image arrondie ne s'aligne pas parfaitement avec le bord de l'image (leur espace supplémentaire est transparent sur les parties supérieures et latérales). Vous aurez donc besoin de l'éditer pour être aligné avec le bord de la toile plus parfaitement.

Answer 3

Voici quelques code:

HTML

<div> 
    <img src="http://s8.postimg.org/3ws8ehaud/logo_easyjobs.png" /> 
</div> 

CSS

img { 
    border-radius:50%; 
    -moz-border-radius:50%; 
    width:185px; 
    height:170px; 
    box-shadow:10px 10px 3px rgba(0,0,0,.5); 
} 

Et le jsFiddle: http://jsfiddle.net/fQY2h/1/