问题
Possible Duplicate:
Glowing Text (HTML CSS)
So I'm looking for a 100% css solution for a text glow effect. I tried text-shadow but I couldn't get it looking how I wanted. I was able to achieve the effect with box-shadow. However, that only glows around the outside of the elements edges, and leaves the inside blank. Here is a picture:
How do I get a nice looking outer glow like above, without the blank inside?
my code is just a simple <li><a></a></li>
, with hover css on both the li, and a tags.
Thanks in advance.
回答1:
a:hover { text-shadow: 0 0 5px #ff0000; }
回答2:
what about a text-shadow on hover
like this
<li>
<a></a>
</li>
css
li a:hover {
text-shadow: 2px 2px 10px #000000;
filter: dropshadow(color=#000000, offx=2, offy=2);
}
FIDDLE HERE
Generate your css 3 properties HERE
回答3:
You can do this with an extra element
jsfiddle example (or fullscreen)
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;
}
Potentially you could skip the extra <span>
element and do this with the :before
pseudo-element on the anchor or list item
来源:https://stackoverflow.com/questions/12845134/how-do-i-get-my-links-to-glow-on-hover-with-css3