Question

我想在HTML和CSS中制作发光文本。我正在学习本教程。

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

我希望文本能够发光，就像Windows Vista上的最小化，最大化和退出按钮一样，当您将鼠标悬停在它们上时会发光。

我已经在线阅读了8个教程，都说FILTER ONLY适用于IE（完全BS顺便说一句，我使用的是IE9 RC，甚至没有显示），所以我找到的关于发光的教程实际上都没有用像<p>, <a> <h1>等文字

如何让我的文字在悬停时发光？（没有图像）

Answer 1

也许玩CSS3文字阴影。

text-shadow: #EEEE00 0 0 10px;

IE8及以下版本不会支持它，但这就是filter派上用场的地方。

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

P.S。 CSS3 text-shadow属性的一个巧妙的小功能是允许多个阴影。

text-shadow: #EEEE00 0 0 10px, #FF0000 5px 5px 5px;

Answer 2

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

enter image description here

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

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

enter image description here

Answer 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;
   }

Answer 4

如果您认为自己有这个问题的答案，请务必分享。因为我不会放弃这个。我希望每天早上对文本的发光效果和我想要的咖啡一样多。

在此期间，我找到了一个半好半的解决方案：

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

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

4 个答案: