Jquery 带渐变和边框的文本

有没有办法将字体中的边框与渐变背景相结合

使用文本阴影可以消除背景效果，webkit笔划会出现在内部字体中，在某些浏览器中也不起作用。还尝试了svg，或多或少我得到了与webkit相同的结果，唯一的优点是浏览器兼容性

也许使用js或jQuery

下面的例子很接近，但还不够好

   h1 {
     color: red;
     -webkit-text-stroke: 3px black;
     font-size: 40px;
     background: linear-gradient(50deg, red 29%, yellow 47%, red 50%, orange 57%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
  } 

---

好吧，这是有点黑客，所以请不要恨我太多，但它得到了工作，我认为

基本上，我将渐变应用于

.title1

，将边框应用于

.title2

，并将它们放置在彼此的顶部

.container{
位置：相对位置；
}
.头衔{
字体大小：40px；
位置：绝对位置；
}
.标题1{
文本阴影：-1px-1px 0#000，1px-1px 0#000，-1px 1px 0#000，1px 1px 0#000；
}
.标题2{
颜色：红色；
背景：线性梯度（50度，红色29%，黄色47%，红色50%，橙色57%）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}

这是一些h1文本
这是一些h1文本

好吧，这有点不对劲，所以请不要太恨我，但我认为它完成了任务

基本上，我将渐变应用于

.title1

，将边框应用于

.title2

，并将它们放置在彼此的顶部

.container{
位置：相对位置；
}
.头衔{
字体大小：40px；
位置：绝对位置；
}
.标题1{
文本阴影：-1px-1px 0#000，1px-1px 0#000，-1px 1px 0#000，1px 1px 0#000；
}
.标题2{
颜色：红色；
背景：线性梯度（50度，红色29%，黄色47%，红色50%，橙色57%）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}

这是一些h1文本
这是一些h1文本

您还可以查看firefox：

div{
背景：线性梯度（35度，灰色，金色，紫色，石灰，灰色，金色，紫色，石灰，灰色，金色，紫色，石灰，灰色，金色，紫色，石灰）；
文本对齐：居中；
}
h1{
/*剪辑文本平均值*/
混合模式：屏幕；
盒影：镶嵌0 100vw白色；
/*带阴影删除的可选名称*//*字母间距：1px*/
/*平均冲程*/
文本阴影：
/*首先画一个白色的笔划，多重阴影以增加不透明度*/
0 0 3px#fff，0 0 3px#fff，0 0 3px#fff，
/*从这里开始使用较深的颜色*/
0 0 3px 000、0 0 3px 000、0 0 3px 000、0 0 3px 000、0 0 3px 000、0 0 3px 000、0 0 3px 000、0 0 3px 000、0 0 0 3px 000、0 0 0 3px 000、0 0 3px 000、0 0 3px 000、0 0 3px 000、0 3px 000、0 3px 000、0 3px 000
}

另一个剪辑文本转换为混合模式

您还可以查看firefox：

div{
背景：线性梯度（35度，灰色，金色，紫色，石灰，灰色，金色，紫色，石灰，灰色，金色，紫色，石灰，灰色，金色，紫色，石灰）；
文本对齐：居中；
}
h1{
/*剪辑文本平均值*/
混合模式：屏幕；
盒影：镶嵌0 100vw白色；
/*带阴影删除的可选名称*//*字母间距：1px*/
/*平均冲程*/
文本阴影：
/*首先画一个白色的笔划，多重阴影以增加不透明度*/
0 0 3px#fff，0 0 3px#fff，0 0 3px#fff，
/*从这里开始使用较深的颜色*/
0 0 3px 000、0 0 3px 000、0 0 3px 000、0 0 3px 000、0 0 3px 000、0 0 3px 000、0 0 3px 000、0 0 3px 000、0 0 0 3px 000、0 0 0 3px 000、0 0 3px 000、0 0 3px 000、0 0 3px 000、0 3px 000、0 3px 000、0 3px 000
}

另一个剪辑文本转换为混合模式

您是否尝试过包含alpha频道的

文本阴影

声明？例如，使用指定为

rgba

或

hsla

的颜色？是的，结果相同。您是否尝试过包含alpha通道的

文本阴影

声明？即，使用指定为

rgba

或

hsla

的颜色？是的，结果相同。