如何在 HTML 和 CSS 中制作发光文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5201949/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make glowing text in HTML and CSS
提问by Marko
I want to make glowing text in HTML and CSS. I'm following this tutorial.
我想用 HTML 和 CSS 制作发光文本。我正在关注本教程。
I want the text to glow, just like the minimize, maximize and exit buttons on Windows Vista and 7 glow when you hover over them.
我希望文本发光，就像 Windows Vista 和 7 上的最小化、最大化和退出按钮在您将鼠标悬停在它们上面时发光一样。
I have read 8 tutorials online, all saying that FILTER ONLY works on IE (Complete BS btw, I am using IE9 RC and it doesn't even display), so none of the tutorials I have found about glowing actually work for text like <p>, <a> <h1>etc.
我已阅读8个在线教程，所有说，过滤器仅适用于IE浏览器（完全BS顺便说一句，我使用IE9 RC，它甚至不显示），因此所有的教程，我发现其实左右泛着工作如文本<p>, <a> <h1>等.
How can I make my text glow on hover? (without images)
如何让我的文字在悬停时发光？（没有图像）
回答by Marko
Have a play with CSS3 text-shadow perhaps.
或许可以试试 CSS3 text-shadow。
text-shadow: #EEEE00 0 0 10px;
IE8 and below won't support it, but that's where filtercomes in handy.
IE8 及以下将不支持它，但这就是filter派上用场的地方。
filter: glow(color=#EEEE00,strength=3);
P.S. A neat little feature of the CSS3 text-shadow property is that it allows multiple shadows.
PS CSS3 text-shadow 属性的一个小功能是它允许多个阴影。
text-shadow: #EEEE00 0 0 10px, #FF0000 5px 5px 5px;
回答by Nedudi
find examples here http://enjoycss.com/gallery/text_effects
在这里找到示例http://enjoycss.com/gallery/text_effects
you can open each of them in editor and adjust any css3 parameters then just get css3 code that you need (it will be generated) by enjoycss
您可以在编辑器中打开它们中的每一个并调整任何 css3 参数，然后通过 enjoycss 获取您需要的 css3 代码（它将生成）
for example http://enjoycss.com/39/1#textShadow
例如http://enjoycss.com/39/1#textShadow
回答by hamidfzm
Try this CSS3 Trick!
试试这个 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;
}
回答by hamidfzm
If you believe you have an answer to this question, please, by all means share it. As I am not going to give up on this. I want the glow effect on Text just as much as I want my coffee every morning.
如果您认为您对这个问题有答案，请务必分享。因为我不会放弃这个。我想要 Text 上的发光效果就像我每天早上想要喝咖啡一样。
I have found a half-good, half-cr*p solution in the meantime:
在此期间，我找到了一个半好半cr*p 的解决方案：
<DOCTYPE html>
<html>
<head>
<title>HTML5 & CSS3 Samples</title>
<style>
p {
filter:progid:DXImageTransform.Microsoft.Glow(Strength, Color, Enabled);
}
</style>
</head>
<body>
<center>
<p>Welcome!</p>
</center>
</body>
</html>
