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