Question

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

我需要它与大多数浏览器一起使用。

你能指点我一个教程吗？

感谢您的回答。我可以不用CSS3吗？

Answer 1

css3盒子阴影我想。这些没有在IE8中实现

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

Answer 2

要添加到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);

Answer 3

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

但是，需要启用CSS3的浏览器。

或者设置背景图片以获得跨浏览器支持：http://dimox.net/cross-browser-css3-box-shadow/

Answer 4

有一些技巧（在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作为边的背景。

CSS - 如何在流体盒周围添加发光效果？

4 个答案: