如何使用 css3 创建此文本效果?

Question

[请帮帮我，如何使用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>

Answer 1

你要找的是 CSS3text-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>