CSS：发光的文本，发光非常宽和高 [英] CSS: glowing text with glow very wide and high

问题描述

我正在调查一些天的box-shadow和text-shadow。我试图获得以下效果。我想要一个焕然一新从< a> 的文本悬停。简单，这应该很容易，因为我探讨使用文本阴影。好吧，但它适用于小发光，我的意思是，一旦发光更大，你只是看不到发光，由于其高模糊。必须有一个解决方案。

I'm investigating since some days box-shadow and text-shadow. I'm trying to gain the following effect. I want a glow come out from the text of the <a> once hovered. Simple, this should be easy as I explored using text-shadow. Ok, but it works with small glows, I mean, once the glow is bigger you just cannot see the glow due to its high blur. There has to be a solution for this. An image will explain better than 100 words.

这是我想要的：

LINK：

HOVER：

这是我用于

#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;
}

我知道我可以再次使用背景图片进行悬停，但我想避免这个。问题是，如果你添加更多的模糊它不再出现，因为它太模糊。其他两个属性不帮助太多，因为我想要从中间开始发光。

I know I can use background image again for the hover but I want to avoid this. The problem is that if you add more blur it doesnt appear anymore, as its too blur. the other two properties dont help too much, as I want the glow to begin from the middle.

让我们一起来看看我们如何使用CSS一个宽

Lets work out this together and see how we can do with CSS a wide and high glow effect.

推荐答案

为什么不使用CSS3的渐变？ >查看这个小提琴。

Take a look at this fiddle.

你可以此处或此处。

这篇关于CSS：发光的文本，发光非常宽和高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！