Html 使用 CSS 的文本外发光效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40393497/
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
Text outer glow effect using CSS
提问by cup_of
I need to add an "outer glow" Photoshop effect to some text using CSS. Here is a screenshot of the mockup of what I am trying to acheive:
我需要使用 CSS 为某些文本添加“外发光”Photoshop 效果。这是我想要实现的模型的屏幕截图：
Here is the Photoshop layer settings:
这是Photoshop图层设置：
I'm pretty sure this is text-shadowbut I've been messing around with it and I cannot achieve a glow on all sides.
我很确定这是，text-shadow但我一直在弄乱它，我无法在所有方面都发光。
回答by frnt
Text-shadowis what you have to use to achieve glow or some kind of text-shadow.
Text-shadow是你必须用来实现发光或某种文本阴影的东西。
p{
text-shadow : horizontal-shadow vertical-shadow blur color;
}
To add multiple text-shadow, you can do that by separating them, by adding comma to text-shadow property.
要添加multiple text-shadow，您可以通过将它们分开，将逗号添加到 text-shadow 属性来实现。
p{
text-shadow : horizontal-shadow vertical-shadow blur color, horizontal-shadow vertical-shadow blur color;
}
p{
background:#111;
color:#fff;
text-shadow:1px 1px 10px #fff, 1px 1px 10px #ccc;
font-size:48px;
text-align:center;
}<p>
Demo Text
</p>回答by Nhan
There has text-shadow, first two values are xand yoffsets, third value specifies the shadow blur:
有text-shadow，前两个值是x和y偏移量，第三个值指定阴影模糊：
text-shadow: 0 0 32px black;
body {
background-color: #00bcd4;
}
p {
margin: 30px;
color: white;
font-family: sans-serif;
font-size: 40px;
font-weight: bold;
text-shadow: 0 0 32px black;
}<p>Lorem ipsum dolor sit amet</p>回答by R. Schifini
Are you looking for something like this?
你在寻找这样的东西吗？
body{
background-color: #CCAA77;
}
div{
font-size: 40px;
color: white;
text-shadow: 0px 0px 30px white,0px 0px 30px white,0px 0px 30px white,0px 0px 10px #553300,0px 0px 10px #553300;
}<div>Protecting From Cancer</div>As you can see, you can compound several text-shadow to make them more intense and mixing colors.
如您所见，您可以复合多个文本阴影，使它们更加强烈并混合颜色。
