[请帮帮我,如何用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>
答案 0 :(得分:2)
您正在寻找的是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;
}
&#13;
<div class="headline-wrap">
<h1>Some text</h1>
</div>
&#13;