使用CSS文本外部发光效果

Question

我需要使用CSS为某些文本添加“外部发光”Photoshop效果。这是我试图实现的模型的截图：

这是Photoshop图层设置：

我很确定这是text-shadow，但我一直在搞乱它，我无法在各方面发光。

Answer 1

Text-shadow是你必须用来实现发光或某种文字阴影的。

p{
text-shadow : horizontal-shadow vertical-shadow blur color;
}

要添加multiple text-shadow，您可以通过将逗号添加到text-shadow属性来分隔它们。

p{
    text-shadow : horizontal-shadow vertical-shadow blur color, horizontal-shadow vertical-shadow blur color;
 }

＆＃13;

＆＃13;

p{
  background:#111;
  color:#fff;
  text-shadow:1px 1px 10px #fff, 1px 1px 10px #ccc;
  font-size:48px;
  text-align:center;
}

＆＃13;

<p>
Demo Text
</p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

Answer 3

你在找这样的东西吗？

＆＃13;

＆＃13;

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

＆＃13;

<div>Protecting From Cancer</div>

＆＃13;

＆＃13;

＆＃13;

正如您所看到的，您可以复合多个文本阴影，使它们更加强烈并混合颜色。