Question

有没有办法在字体中组合边框和渐变背景？

使用text-shadow杀死背景效果，webkit-stroke使用内部字体，也不会在某些浏览器中使用。也尝试使用svg或更多或更少我获得与webkit相同的结果，只有pro是浏览器兼容性。

也许使用js或jQuery？

下面的示例很接近但不够好

var datePickerObject = $('#datepicker').datepicker({
  onSelect: function(dateText, inst) {
    alert('Working');
  }
});

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>

Answer 2

您还可以查看mix-blend-mode以包含firefox：

div {
  background: linear-gradient(35deg, gray, gold, purple, lime, gray, gold, purple, lime, gray, gold, purple, lime, gray, gold, purple, lime);
  text-align: center;
}
h1 {
  /* clip-text average */
  mix-blend-mode: screen;
  box-shadow: inset 0 0 0 100vw white;

  /*optionnal with shadow striked *//*letter-spacing:1px;*/

  /* stroke average */
  text-shadow:
  /* first draw a white stroke , multiplacate shadow to increase opacity */
  0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff,
  /* use a darker color from here */
  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 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000
}

<div>
  <h1>Another clip-text turned into mix-blend-mode</h1>
</div>

codepen to play with

带渐变和边框的文本

2 个答案: