hover - CSS:发光文本，发光非常宽和高

Question

我从几天前就开始调查 box-shadow 和 text-shadow。我正在尝试获得以下效果。我想要从 <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

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

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/ -