当前位置：文江博客话题详情

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

发布于 2024-10-25 03:45:26 字数 231 浏览 1 评论 0原文

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

我需要它与大多数浏览器一起工作。

你能给我指点教程之类的吗？

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜访吸血鬼 2024-11-01 03:45:26

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

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

css3 box shadows I'd think. These aren't implemented in IE8

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

回复收藏 0 原文

柠檬 2024-11-01 03:45:26

要补充 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);

To add on to Groovetrain's answer, if you use rgba instead of a hex value you can have the colors be rendered with transparency letting whatever is below be seen through (which may or may not be valuable depending on the application).

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

回复收藏 0 原文

心意如水 2024-11-01 03:45:26

有一些技术可以实现这一点（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 作为侧面的背景。

There are a few techniques for this (outside of CSS3).

If the width is fixed, one way is to use two DIVS. One has the top and the sides. You need to make and image that is very tall, with the sides repeating and the bottom cut off and use it as a background on the outer DIV. Then make an image that contains the bottom, and nest it inside, and absolutely-position it to the bottom.

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

If it is x/y scaleable you can use the 9-slice method:

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

You slice your background into 9 pieces, where the middle piece is blank and contains your content. You make four corners and use repeat-x / repeat-y for the background of the sides.

回复收藏 0 原文