如何用 css3 创建这种文字效果？答案

【问题标题】：How to create this text effect with css3?如何用 css3 创建这种文字效果？
【发布时间】：2017-12-17 16:55:36
【问题描述】：

[请帮帮我，如何用 css3 创建这个效果][1] 我已经尝试了许多创建工具来制作这种效果，但它不起作用

你可以在这个链接中查看我的图片，我是菜鸟，我不知道如何在这里附上图片：https://ibb.co/kn1aKa

这是 CSS 文件中的代码

@font-face { font-family: 'UTM Cookies'; font-style: normal; font-weight: 400; src: local('UTM Cookies'), local('UTM Cookies'), url(../fonts/UTM-Cookies_0.woff) format('woff');

}

.headline-wrap h1 { font-size: 20px; text-transform: uppercase; margin: 0px 0px 15px 0px; color: #000; font-family: UTM Cookies; padding: 6px 0px 6px 0px; color: #FF972F; text-align: center; }

<div class="headline-wrap">
  <h1>Some Text</h1>
</div>

【问题讨论】：

请发布您的代码。
我在 css 中写道：@font-face { font-family: 'UTM Cookies';字体样式：正常；字体粗细：400； src: local('UTM Cookies'), local('UTM Cookies'), url(../fonts/UTM-Cookies_0.woff) 格式('woff'); } 和类： .headline-wrap h1 { font-size: 20px;文本转换：大写；边距：0px 0px 15px 0px；颜色：#000；字体系列：UTM Cookies；填充：6px 0px 6px 0px；颜色：#FF972F；文本对齐：居中； }
您可以使用 Stack Overflow sn-ps 添加与您的问题相关的简短 sn-p 代码。
感谢 Chava G，我做到了
谷歌上添加文本发光 css 的第一个结果：w3.org/Style/Examples/007/text-shadow.en.html

标签： html css border effect

【解决方案1】：

您正在寻找的是 CSS3 text-shadow 属性，您需要多次应用它才能在文本周围找到它。

文本阴影属性采用 x 偏移、y 偏移、模糊半径和颜色的值。

          /* offset-x | offset-y | blur-radius | color */
text-shadow: 1px        1px        2px           white;

它不需要散布值，但您可以将具有不同偏移量的多个阴影作为逗号分隔列表应用，以达到所需的效果。

text-shadow: 2px 2px white, -2px -2px white, 2px -2px white, -2px 2px white;

@font-face { font-family: 'UTM Cookies'; font-style: normal; font-weight: 400; src: local('UTM Cookies'), local('UTM Cookies'), url(../fonts/UTM-Cookies_0.woff) format('woff');
}

.headline-wrap {
  background-color: lightblue;
}

.headline-wrap h1 { font-size: 20px; text-transform: uppercase; margin: 0px 0px 15px 0px; color: #000; font-family: UTM Cookies; padding: 6px 0px 6px 0px; color: #FF972F; text-align: center; 
  font-weight: bolder;
  text-shadow: 2px 2px white, -2px -2px white, 2px -2px white, -2px 2px white;
}

<div class="headline-wrap">
  <h1>Some text</h1>
</div>

【讨论】：