如何使用CSS3使我的链接在:hover时发光？

Question

可能是重复问题：
HTML CSS发光文本

所以我正在寻找一种100%的CSS解决方案来实现文字发光效果。我尝试了text-shadow，但我无法获得我想要的效果。我能够通过box-shadow实现该效果。然而，这只会在元素边缘周围发光，并留下内部空白。这是一张图片：

如何获得一个漂亮的外发光效果，就像上面的那样，而不留空白内部？

我的代码只是一个简单的 <li><a></a></li> ，同时在 li 和 a 标签上使用了 hover css。

提前致谢。

- Brian Peters

---

http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ - Jawad

Answer 1

a:hover { text-shadow: 0 0 5px #ff0000; }

- Kevin Boucher

---

如果你看了上面的内容，我声明text-shadow不是我要找的效果。除非它能够像我的图片展示的那样大。 - Brian Peters

好的，当我回答这个问题时，你的图片还没有出现。但是如果你研究一下text-shadow，你很快就会学会如何通过调整大小、模糊度和颜色来实现你想要的效果。 - Kevin Boucher

谢谢，老实说之前那个效果不太好。不过我最终还是搞定了。我只是将阴影应用了三次，每次为15像素。再次感谢。 - Brian Peters

Answer 2

关于悬停时的文本阴影呢？

就像这样：

<li>
  <a></a>
</li>

css

li a:hover {
  text-shadow: 2px 2px 10px #000000;

  filter: dropshadow(color=#000000, offx=2, offy=2);
}

这里是示例

在这里生成你的CSS 3属性。

- Simon Dragsbæk

---

社区不仅会给你，你也需要自己努力。你可以尝试使用我创建的生成器来制作你想要的发光效果，然后将其添加到我发布的CSS中。 - Simon Dragsbæk

Answer 3

您可以使用额外的元素来实现此操作

jsfiddle 示例（或全屏）

HTML

<ul id="nav">
    <li><span></span><a href="#">Home</a></li>
    <li><span></span><a href="#">Products</a></li>
    <li><span></span><a href="#">Really Long Nav Item</a></li>
</ul>

CSS

#nav {background-color:#000;overflow:hidden;}
#nav li {float:left;position:relative;}
#nav a {display:block;background:transparent;color:#fff;font-weight:bold;text-decoration:none;padding:20px;position:relative;}

#nav li:hover span {
    position:absolute;
    left:50%;top:50%;
    margin-left:-35%;
    width:70%;height:0px;
    box-shadow:0 0 20px 12px rgba(150, 180, 200, .6);
    border-radius:10px 6px;
}

潜在地，您可以跳过额外的 <span> 元素，并使用锚点或列表项上的 :before 伪元素来完成此操作。

- MikeM