如何创建自定义角度与颜色的多组线性渐变？（万事达卡场景）

核心需求实现 #

要模拟万事达卡背面数字"1234567"后方的多组渐变效果，我们可以基于你的代码调整尺寸、渐变错位逻辑，并明确渐变方向的控制方法：

完整代码示例 #

/* 模拟卡片容器 */
div{
  width: 350px;
  height: 200px;
  background: #fff;
  border: 3px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

/* 添加数字覆盖效果 */
div::before {
  content: "1234567";
  position: absolute;
  left: 20px;
  font-size: 24px;
  font-weight: bold;
  z-index: 1;
  background: #fff;
  padding: 0 5px;
}

/* 渐变条纹样式 */
span{
  width: 90%;
  height: 6px;
  background: linear-gradient(to right, orange, lightblue, orange);
  display: block;
}

/* 奇偶条纹错位，增强真实感 */
span:nth-child(odd) {
  background-position: 20px 0;
}

span:nth-child(even) {
  background-position: -20px 0;
}

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

渐变方向调整方法 #

你可以通过两种方式精准控制渐变方向：

• 关键词控制：直接使用方向描述，比如：
  • to right：从左到右渐变（默认横向）
  • to left：从右到左反向渐变
  • to bottom：从上到下纵向渐变
  • to bottom right：从左上到右下斜向渐变
• 角度控制：用角度值定义方向，0deg对应to top，90deg对应to right，180deg对应to bottom，支持任意角度（比如30deg实现自定义斜向渐变）。

示例：

/* 斜向渐变 */
span{
  background: linear-gradient(30deg, orange, lightblue, orange);
}

/* 反向横向渐变 */
span{
  background: linear-gradient(to left, orange, lightblue, orange);
}

内容的提问来源于stack exchange，提问作者yashlodhi