使用 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：

定义两种渐变，一种用于背景，一种用于文本。 (LinearGradient)
创建背景和文字。（矩形和文本，tspan）
将元素的描边和填充设置为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>

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

Gradient colour with Linear Gradient Border in text using css not working

html

css

css-shapes

linear-gradients

文字渐变