jquery - 带有渐变和边框的文本

Question

有什么方法可以在字体中结合边框和渐变背景吗？

使用 text-shadow 会破坏背景效果，webkit-stroke 进入内部字体并且在某些浏览器中也不起作用。也尝试使用 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;
  } 

Answer 1

好吧，这有点老套，所以请不要太讨厌我，但我认为它可以完成工作。

基本上我将渐变应用到 .title1 并将边框应用到 .title2 并将它们放在彼此之上。

.container {
  position: relative;
}
.title {
  font-size: 40px;
  position: absolute;
}
.title1 {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.title2 {
  color: red;
  background: linear-gradient(50deg, red 29%, yellow 47%, red 50%, orange 57%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div class="container">
  <h1 class="title title1">This is some h1 text</h1>
  <h1 class="title title2">This is some h1 text</h1>
</div>