CSS：在圖像周圍創建白色輝光

Question

如何創建白色輝光作爲未知尺寸圖像的邊界？

Answer 1

使用簡單CSS3（在IE < 9不支持）

img 
{ 
    box-shadow: 0px 0px 5px #fff; 
} 

這將使每個圖像周圍白色的光芒在文檔中，用更具體的選擇，選擇你想周圍的光暈，其圖像。你可以改變當然:)的顏色

如果你擔心沒有自己的瀏覽器的最新版本的用戶，使用這樣的：

img 
{ 
-moz-box-shadow: 0 0 5px #fff; 
-webkit-box-shadow: 0 0 5px #fff; 
box-shadow: 0px 0px 5px #fff; 
} 

對於IE，你可以使用一個發光過濾器（不知道哪些瀏覽器支持它）

img 
{ 
    filter:progid:DXImageTransform.Microsoft.Glow(Color=white,Strength=5); 
} 

播放與設置，看看有什麼適合你:)

Answer 2

取決於你的目標瀏覽器是什麼。在較新的是as simple as：

-moz-box-shadow: 0 0 5px #fff; 
-webkit-box-shadow: 0 0 5px #fff; 
     box-shadow: 0 0 5px #fff; 

對於你要實現的解決方法，例如，基於on this example舊的瀏覽器，但你很可能會需要額外加價。

Answer 3

你可以使用CSS3來創建一個類似的效果，但是你只能在支持盒子陰影的現代瀏覽器中看到它，除非你使用像CSS3PIE這樣的polyfill。所以，例如，你可以這樣做：http://jsfiddle.net/cany2/

Answer 4

@tamir;你可以用css3屬性來做。

img{ 
-webkit-box-shadow: 0px 0px 3px 5px #f2e1f2; 
-moz-box-shadow: 0px 0px 3px 5px #f2e1f2; 
box-shadow: 0px 0px 3px 5px #f2e1f2; 
} 

檢查小提琴http://jsfiddle.net/XUC5q/1/ &如果你需要它在舊版本的IE瀏覽器的工作，你可以從這裏http://css3generator.com/

生成，您可以使用CSS3 PIE效仿的box-shadow在這些瀏覽器&你可以使用filter凱爾這樣說

filter:progid:DXImageTransform.Microsoft.Glow(color='red', Strength='5') 

你可以從這裏生成您的過濾器

Answer 5

晚到這裏的派對;但只是想增加一點額外的樂趣..

box-shadow: 0px 0px 5px rgba(0,0,0,.3); 
padding:7px; 

會給你一個漂亮的圖像填充。填充會給你一個模擬的白色邊框（或者你設置的任何邊框）。 rgba只允許你對特定顏色做一個opicity; 0,0,0是黑色的。您可以輕鬆使用任何其他RGB顏色。

希望這可以幫助別人！

Answer 6

工程就像一個魅力！

.imageClass { 
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5)); 
} 

瞧！而已！顯然這不會在ie中工作，但誰在乎...