logo标签列表

如何在HTML和CSS中制作发光的文本

htmlinternet-explorercssglow
17

我想在HTML和CSS中实现文本发光效果。我正在按照此教程操作。

http://msdn.microsoft.com/en-us/library/gg589484(v=VS.85).aspx#creating_%22glow%22_effects_with_drop_shadows

我想让文本发光，就像Windows Vista和7上的最小化、最大化和退出按钮在悬停时发光。

我已经阅读了8篇在线教程，所有的教程都说FILTER只适用于IE（完全荒谬，顺便说一下，我正在使用IE9 RC，它甚至不能正常显示），因此我找到的关于像<p>、<a>和<h1>等文本发光的教程都不起作用。

如何使我的文本在悬停时发光？（无需图像）

1
CSS3 目前支持不够完善。 - yoda
但是，好吧。尚未得到很好的支持...但没关系。但发光效果显然适用于 div 元素，我只是不明白为什么它对文本不起作用？ - anon271334
2
IE9不再支持filter，因为它是非标准的。然而，令人非常烦恼的是，它不支持text-shadow属性。 - Yi Jiang
非常非常烦人。IE9只不过是过度夸大的炒作。就像苹果产品一样。:-p 然而，我必须承认我对这些产品有某种上瘾，因为我总是发现自己还是在使用它们。 - anon271334
4个回答
34

可以尝试使用CSS3的text-shadow属性。

text-shadow: #EEEE00 0 0 10px;

虽然IE8及以下版本不支持，但这时就可以用到filter。

filter: glow(color=#EEEE00,strength=3);

附言：CSS3的text-shadow属性有一个不错的小功能，它允许多个阴影。

text-shadow: #EEEE00 0 0 10px, #FF0000 5px 5px 5px;
感谢您的回答。text-shadow: #EEEE00 0 0 10px; 在IE9 RC或IE9 Beta中无法正常工作，文本没有任何变化，最后一个text-shadow示例也无法正常工作。:-S - anon271334
1
啊，没错，http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx 搜索 text-shadow，没有支持！微软再次失败了。 - Marko
1
我已经厌倦了听到那些通用的借口，比如“CSS3仍处于工作草案阶段”和“HTML5仍处于工作草案阶段”——如果是这样的话，为什么Chrome已经支持HTML5中的X特性或CSS3中的Y特性？为什么Flock支持这个，Opera支持那个？而为什么IE9不支持其他任何浏览器已经支持的大部分功能呢？这种事情足以让我变成一个彻底的精神病患者，哈哈。 - anon271334
1
这篇文章可能会有用：http://www.workingwith.me.uk/articles/css/cross-browser-drop-shadows - GlennG
@GlennG，我非常愿意接受这个答案；）虽然不完全是我所希望的，但看起来我可以稍微调整一下并让它按照我的想法工作 :-) 谢谢！ - anon271334
11
1
尝试这个CSS3技巧！
.text-glow {/*Definig font could be useful!*/
   font-size:4em;
   color: #FFFFFF;
   font-family:Arial;
   }
.text-glow:hover {
text-shadow: 1px 0px 20px #ffd200;
-webkit-transition: 1s linear 0s;
-moz-transition: 1s linear 0s;
-o-transition: 1s linear 0s;
transition: 1s linear 0s;
outline: 0 none;
   }
0

如果您认为自己有这个问题的答案，请务必分享。因为我不会放弃。我希望文字具有发光效果，就像每天早上一样渴望咖啡。

与此同时，我已经找到了一个半好半烂的解决方案：

<DOCTYPE html>  
<html>
<head>
<title>HTML5 &amp; CSS3 Samples</title>
<style>
  p {
  filter:progid:DXImageTransform.Microsoft.Glow(Strength, Color, Enabled);
    }
</style>
</head>
<body>
<center>
<p>Welcome!</p>
</center>

</body>
</html>
1
嗯，我不记得自己打了整个段落两次。 - anon271334
可能是时候去看医生了，哈哈哈。 - Marko
可能可以。但是在我承诺之前（或者别人承诺我）我必须让我的文本发光，哈哈:P - 但说真的，发光的文本；你会认为在网页设计中现在可以实现的所有超级棒的事情中，甚至在HTML5/CSS3之前，你会认为，甚至期望你能够让一些文本发光，哈哈。 - anon271334
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接