使用css的文本中带有线性渐变边框的渐变颜色不起作用

Question

我想使用 CSS 设计类似于下图的 1 英镑。

我想在这个设计中添加一些带有渐变颜色、渐变边框和文本阴影的文本。我尝试了以下代码，但它不起作用。

CSS：

.pound-lbl {
       background-image: linear-gradient(275deg, #f8e71c 0%, #f8bd1c 100%);
       -webkit-background-clip: text;
       color: #FFDE17;
       text-shadow: 0 2px 4px rgba(0,0,0,0.50);
       background: -webkit-linear-gradient(275deg,#F8CC1C 0%, #FFFFFF 100%);
       -webkit-background-clip: text;
       -webkit-text-stroke: 2px transparent;
}

Answer 1

我认为产生这种效果的唯一方法是复制文本。一个将获得笔触颜色，另一个将获得背景颜色：

我使用不同的颜色来更好地识别它们：

span[data-text] {
  display:inline-block;
  font-size:90px;
  font-weight:bold;
  font-family:arial;
  position:relative;
  margin:10px;
}
span[data-text]:before {
  content:attr(data-text);
  text-shadow: 0 2px 20px purple;
  background: linear-gradient(to bottom,red 0%, blue 100%);
  -webkit-text-stroke: 5px transparent;    
  -webkit-background-clip: text;
  background-clip: text;
  color:transparent;
}
span[data-text]:after {
  content:attr(data-text);
  left:0;
  top:0;
  position:absolute;
  background-image: linear-gradient(275deg, green 0%, yellow 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

<span data-text="£1"></span>

Answer 2

文字渐变

当您需要在文本上设置渐变时，css 不是可以使用的工具。
svg 更容易用于高级渐变和所有复杂的形状。

这是我推荐的创建 svg 的方法：

1. 定义两个渐变，一个用于背景，一个用于文本。 (LinearGradient)
2. 创建背景和文本。 (rect, and text, tspan)
3. 将元素的描边和填充设置为 LinearGradients。

这是它的外观：

<!--viewBox cuts the shape so that there is little whitespace-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" height="500px" viewBox="0 40 100 60">
   <defs>
      <!--Gradients defined to use later-->
      <linearGradient id="textGradient" x1="90" x2="90" y1="40" y2="60" gradientUnits="userSpaceOnUse">
         <stop stop-color="#f2cb3c" offset="0"/>
         <stop stop-color="#ffffff" offset="1"/>
      </linearGradient>
      <linearGradient id="backgroundGradient" x1="0" y1="100" x2="0" y2="100" gradientUnits="userSpaceOnUse">
         <stop stop-color="#5bc129" offset="0"/>
         <stop stop-color="#85de31" offset="1"/>
      </linearGradient>
   </defs>
   <!--Rect that covers the background-->
   <rect fill="url(#backgroundGradient)" stroke="none"; width="100" height="60" x="0" y="20"/>
   <g class="text" stroke="url(#textGradient)" fill="#f5e43e" stroke-width="0.5">
      <text x="35" y="68" style="font-size:50px;font-family:Arial;">
         <tspan>£1</tspan>
      </text>
   </g>
</svg>