如何使用 css 渲染这样的图像文本？ [重复]

【问题标题】：How to use css to render like this image text？ [duplicate]如何使用 css 渲染这样的图像文本？ [重复]
【发布时间】：2021-05-31 06:33:10
【问题描述】：

如何使用css来渲染像这样的图片文字？文字渐变和文字边框颜色，我这样写文本框时无法达到效果

.text {
  background: linear-gradient(to top, #FFFFFF, #EEC09B);
  background: -webkit-linear-gradient(to top, #FFFFFF, #EEC09B);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: #834C21 1px 1px 1px, #834C21 1px -1px 1px, #834C21 -1px 1px 1px, #834C21 -1px -1px 1px;
}

&lt;div class="text"&gt;6500&lt;div&gt;

[![在此处输入图片描述][1]][1]

【问题讨论】：

标签： css

【解决方案1】：

我试图达到类似的效果。我将文本包裹在 span 中以赋予文本样式。

.text {
  background: #FCE2C1;
  font-size: 36px;
  font-weight: bolder;
  color: transparent;
  -webkit-text-stroke: 2px #86441C;
  font-family: sans-serif;
  width: 80px;
  padding: 10px;
}

.text span {
  background: linear-gradient(to bottom, #fff, #FCE2C1);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0 1px #86441C) drop-shadow(0 5px 1px #86441C40) drop-shadow(0 0 3px #86441C);
}

<div class="text">
  <span>6500</span>
</div>

【讨论】：