如何同时使用文本阴影和线性渐变的文本? [英] How to use both text-shadow and linear-gradient for text?
本文介绍了如何同时使用文本阴影和线性渐变的文本?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我尝试同时使用它们,但是失败了.
I try to use them both but it fails..
h1 {
font-size: 72px;
background: linear-gradient(to top, black 50%, orange 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
<h1>Heading 1</h1>
仅使用线性渐变而没有文本阴影:
Using only linear-gradient without text-shadow:
仅使用文本阴影而不使用线性渐变:
Using only text-shadow without linear-gradient:
同时使用:
推荐答案
基于此上一个答案,这是一个想法您需要在其中复制文本的地方:
Based on this previous answer here is an idea where you will need to duplicate the text:
h1 {
font-family:sans-serif;
font-size:60px;
font-weight: bold;
position:relative;
margin:20px;
}
h1::before,
h1::after {
content:attr(data-text);
}
h1::after {
color:#fff; /*use white*/
/*create the stroke around text*/
text-shadow:
1px 0 0px #000,
0 1px 0px #000,
1px 1px 0px #000,
-1px 0 0px #000,
0 -1px 0px #000,
-1px -1px 0px #000,
-1px 1px 0px #000,
1px -1px 0px #000;
mix-blend-mode: darken; /*everything is more dark than white so we always see the background */
}
h1::before {
position:absolute;
top:0;
left:0;
background:linear-gradient(to bottom,yellow 50%, red 51%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color:transparent;
}
<h1 data-text="Heading 1"></h1>
这篇关于如何同时使用文本阴影和线性渐变的文本?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文