可能重复:
闪烁文字(HTML,CSS)
所以我在寻找一个文本发光效果100%的CSS的解决方案。 我试图文字阴影 ,但我无法得到它的样子,我怎么想。 我是能够实现与箱阴影效果。 然而,只有围绕发光元件的边缘之外,并离开内空白。 这里有一个画面:
我如何获得一个好看的外发光像上面,里面没有空?
我的代码只是一个简单的<li><a></a></li>
对双方的李悬停CSS和标签。
提前致谢。
可能重复:
闪烁文字(HTML,CSS)
所以我在寻找一个文本发光效果100%的CSS的解决方案。 我试图文字阴影 ,但我无法得到它的样子,我怎么想。 我是能够实现与箱阴影效果。 然而,只有围绕发光元件的边缘之外,并离开内空白。 这里有一个画面:
我如何获得一个好看的外发光像上面,里面没有空?
我的代码只是一个简单的<li><a></a></li>
对双方的李悬停CSS和标签。
提前致谢。
a:hover { text-shadow: 0 0 5px #ff0000; }
有关悬停文字阴影什么
像这样
<li>
<a></a>
</li>
CSS
li a:hover {
text-shadow: 2px 2px 10px #000000;
filter: dropshadow(color=#000000, offx=2, offy=2);
}
FIDDLE HERE
生成你的CSS 3的属性HERE
您可以使用一个额外的元素做到这一点
的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
在锚或列表项的伪元素