CSS：发光文本非常宽和高答案

【问题标题】：CSS: glowing text with glow very wide and highCSS：发光文本非常宽和高
【发布时间】：2012-10-01 12:26:48
【问题描述】：

我从几天开始就在研究 box-shadow 和 text-shadow。我试图获得以下效果。我希望一旦悬停，<a> 的文字就会发光。很简单，这应该很容易，因为我使用 text-shadow 进行了探索。好的，但它适用于小光晕，我的意思是，一旦光晕变大，由于它的高度模糊，你就看不到光晕。必须有一个解决方案。一张图片会比 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 实现宽高光效。

【问题讨论】：

标签： hover css glow

【解决方案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/ -

【讨论】：

【解决方案2】：

您可以叠加同心阴影以增加效果：

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/

【讨论】：

【解决方案3】：

为什么不使用 CSS3 的渐变？

看看thisfiddle。

您可以生成自己的渐变here 或here。

【讨论】：

这似乎是我需要的。我很快就要考试了……我会给你学分的！当我使用它时，我在 w3schools 中搜索了渐变 CSS 以查看它与跨浏览器的兼容性。它似乎不存在，它对跨浏览器的友好程度如何？
正如您在此处看到的：caniuse.com/css-gradients 大多数浏览器都支持它，但 IE9 或更低版本不支持。真可惜。