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

【问题标题】：How to make glowing text in HTML and CSS如何在 HTML 和 CSS 中制作发光的文本
【发布时间】：2011-07-09 06:52:28
【问题描述】：

我想用 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> 等文字。

如何让我的文字在悬停时发光？（无图片）

【问题讨论】：

CSS3 还没有得到很好的支持。
但是，好的。它还没有得到很好的支持……还没有。没关系。但是发光效果显然适用于div，我只是不明白它对文本不起作用？
IE9 放弃了对filter 的支持，我相信，因为它是非标准的。但是，不知何故它不支持text-shadow属性，这很烦人
非常非常烦人。 IE9 只不过是过分夸大的炒作。就像苹果产品一样。 :-p 但是，我必须承认，我一定对这些产品有些上瘾，因为无论如何我总是发现自己在使用它们。

标签： html internet-explorer css glow

【解决方案1】：

或许可以试试 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
啊，真的，msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx 搜索 text-shadow，不支持！微软又一次失败了。
我很讨厌听到“CSS3 仍在工作草案中”和“HTML5 仍在工作草案中”这样的通用借口——如果是这样，那么为什么 Chrome 已经支持功能 X HTML5 还是 CSS3 中的功能 Y？为什么 Flock 支持这个，为什么 Opera 支持那个？为什么 IE9 不支持任何其他浏览器已经支持的大部分功能？这种事情足以把我变成一个成熟的精神病患者哈哈。
这篇文章可能有用：workingwith.me.uk/articles/css/cross-browser-drop-shadows
@GlennG，我非常愿意接受这个作为答案 ;) 这并不是我所希望的，但从它的外观来看，并且玩了一会儿，我可以让它按我的意愿工作:-) 谢谢！

【解决方案2】：

在此处查找示例http://enjoycss.com/gallery/text_effects

您可以在编辑器中打开它们中的每一个并调整任何 css3 参数然后只需通过 enjoycss 获取您需要的 css3 代码（它将生成）

例如http://enjoycss.com/39/1#textShadow

【讨论】：

【解决方案3】：

试试这个 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;
   }

【讨论】：

【解决方案4】：

如果您认为自己有这个问题的答案，请务必分享。因为我不会放弃这一点。我想要 Text 上的发光效果，就像我想要每天早上喝咖啡一样。

与此同时，我发现了一个半好半cr*p的解决方案：

<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>

【讨论】：

嗯。我不记得把整个段落打了两次。
哈哈哈也许该去看医生了？
可能。但是，在我承诺自己（或其他人承诺我）之前，我必须让我的文字发光，哈哈：P - 但说真的，发光文字；你会认为现在网页设计中可以实现的所有超棒的事情，甚至是 HTML5/CSS3 之前的版本，你会认为，甚至可能期望你能够发光一些文本哈哈。