4

可能重复：
发光文本 (HTML CSS)

所以我正在寻找一个 100% css 的文本发光效果解决方案。我尝试了 text-shadow但我无法让它看起来像我想要的那样。我能够使用 box-shadow 实现效果。但是，这只在元素边缘的外部发光，而内部则为空白。这是一张图片：

在此处输入图像描述

如何在没有空白的情况下获得像上面那样漂亮的外发光？

我的代码很简单<li><a></a></li>，在 li 和标签上都有悬停 css。

提前致谢。

4

3 回答 3

15 
a:hover { text-shadow: 0 0 5px #ff0000; }
于 2012-10-11T17:27:35.650 回答
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 属性

于 2012-10-11T17:29:01.410 回答
0

你可以用一个额外的元素来做到这一点

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锚点或列表项上的伪元素来执行此操作​</p>

于 2012-10-11T18:14:08.697 回答