CSS - 如何箱陰影應用到圖像四捨五入

這裏是我的簡單的CSS代碼：CSS - 如何箱陰影應用到圖像四捨五入

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

}

這是這樣的：

enter image description here

我logo.png是用Photoshop圓角： http://s8.postimg.org/3ws8ehaud/logo_easyjobs.png

來源

2014-05-20 Jhonatan Sandoval

你的形象是不實際的CSS圓角，圓它，你必須使用'邊界半徑：50％' –

嘗試THIS。希望這可以幫助。我使用border-radius來製作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); 
}

來源

2014-05-20 00:22:01 nej

將border-radius:50%應用到您的圖像，它應該看起來差不多，並修復你的影子。但它看起來像你的圓形圖像不與圖像的邊緣完美排列（它們是在頂部和兩側的額外透明空間）。所以你需要對它進行編輯，使其更加完美地與畫布邊緣對齊。

來源

2014-05-20 00:18:25 Andrew

那麼我們可以通過設置'img'的'background'到'白色'，它將用'白色'填充透明區域，並且我們有一種真正圓潤的圖像，就像[本示例]中的感覺一樣（http://jsfiddle.net/Yavnu/） –

將背景設置爲白色，好主意。它適用於您的徽標。 – Andrew

下面是一些代碼：

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

而且的jsfiddle：http://jsfiddle.net/fQY2h/1/

來源

2014-05-20 00:21:13 disinfor

CSS - 如何箱陰影應用到圖像四捨五入

回答

相關問題