使用CSS实现文本边框发光效果

Question

我需要使用CSS向一些文本添加“外发光”Photoshop效果。这是我试图实现的模拟效果截图： 以下是Photoshop图层设置： 我相当确定这应该用text-shadow实现，但我一直在尝试，无法让所有边都发光。

- cup_of

Answer 1

Text-shadow是实现文字发光或产生某种阴影效果所必须使用的属性。

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

要添加多个文本阴影，您可以通过在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>

- frnt

---

谢谢！我从来不知道你可以有多个文本阴影！ - Alex Sorokoletov

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>

- Nhan

Answer 3

你是否正在寻找类似这样的内容？

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>

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

- R. Schifini

---

我给了你一个赞，但我无法接受这个答案，因为有人在你之前回答了正确的答案。还是谢谢！ - cup_of