如何使用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

您正在尋找的是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>