CSS - 如何在流體盒周圍添加發光效果？

Question

這裏是我的意思是： http://www.lesliesommer.com/wdw07/html/images/glow.png

我需要它與大多數瀏覽器。

你能指點我一個教程什麼的嗎？

感謝您的答案。我可以在沒有CSS3的情況下做到嗎？

Answer 1

這裏有一些技巧（CSS3以外）。

如果寬度是固定的，一種方法是使用兩個DIVS。一個有頂部和兩側。您需要製作非常高的圖像，然後將兩邊重複並切掉底部，並將其用作外部DIV的背景。然後製作一張包含底部的圖像，並將其嵌入其中，並將其完全放置在底部。

<div class="wrapper"> 
    ... content ... 
    <div class="bottom"></div> 
</div> 

.wrapper { 
    width:500px; 
    background-image:url(....); 
    position:relative; 
} 

.bottom { 
    position:absolute; 
    bottom:0px; 
    height:20px; 
    width:500px; 
    background-image:url(....); 
} 

如果是X/Y可擴展的，你可以使用9切片方法：

_|_|_ 
_|_|_ 
| | 

你切你的背景爲9塊，其中中間部分是空白的，幷包含您的內容。您製作四個角，並使用repeat-x/repeat-y作爲背景的邊。

Answer 2

http://www.css3.info/preview/box-shadow/

然而，需要一個CSS3的瀏覽器。

或者設置背景圖像來獲得跨瀏覽器支持：http://dimox.net/cross-browser-css3-box-shadow/

Answer 3

CSS3框陰影我會想。這些都不是在IE8中實現

-webkit-box-shadow: 0px 0px 15px #dddddd; 
-moz-box-shadow: 0px 0px 15px #dddddd; 
box-shadow: 0px 0px 15px #dddddd; 

Answer 4

要添加到Groovetrain的答案，如果你使用rgba不是十六進制值，你可以有顏色與透明度，讓無論是在下面識破（可以是或呈現根據應用可能不重要）。

-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.35); 
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.35); 
box-shadow: 0px 0px 15px rgba(0,0,0,0.35);