CSS：闪烁文字辉光非常宽和高(CSS: glowing text with glow very w

因为一些天箱阴影和文字阴影，我调查。 我想获得以下效果。 我想红光从文本出来<a>一次徘徊。 很简单，这应该是很容易，因为我能否利用文字阴影。 好了，但它的工作原理与小光晕，我的意思是，一旦辉光越大，你就不能看到辉光由于其高模糊。 必须有一个解决方案。 图像将更好地解释超过100个字。

这是我想获得什么：

链接：

徘徊：

这是我使用的代码

#projectBox a:LINK{
    background-image: url('../_img/showcase/projectTabs/link.png');
}

#projectBox a:HOVER{
    background-image: url('../_img/showcase/projectTabs/link.png');
    color:#fa0000;
    text-shadow: 0 0 80px white;
}

我知道我可以再次使用背景图像悬停，但我想避免这种情况。 问题是，如果你添加更多的模糊它不出现了，因为它太模糊。 另外两个属性不帮助太多了，因为我想辉光从中间开始。

让我们制定出了一起，看看我们如何可以用CSS做一个宽和高发光效果。

Answer 1:

为什么不使用CSS3的梯度？

看看这个小提琴。

您可以生成自己的渐变色在这里或在这里 。

Answer 2:

您可以添加多个文本阴影：

text-shadow: 
-3px 0px 10px #FFF,
3px 0px 10px #FFF,
0px 0px 10px #FFF,
-3px -3px 10px #FFF,
3px -3px 10px #FFF,
0px -3px 10px #FFF,
-3px 3px 10px #FFF,
3px 3px 10px #FFF,
0px 3px 10px #FFF;

这会给你一个更广泛，更全面的光芒，因为有文字周围有9点单独的阴影。 调整值，让你正在寻找的强度。

（该值是随机的猜测 - 未经检验的，因为我为我的手机上）:)

http://jsfiddle.net/pzMmC/ -

Answer 3:

您可以覆盖同心阴影倍增的效果：

a:hover {
    text-shadow: 0 0 80px white,
                 0 0 70px white,
                 0 0 60px white,
                 0 0 50px white,
                 0 0 40px white,
                 0 0 30px white;
}

我写了一个测试： http://jsfiddle.net/simbirsk/DnHKk/

文章来源: CSS: glowing text with glow very wide and high