如何仅用CSS实现渐变条纹？左右侧边渐变效果实现方法咨询

嘿，当然可以只用纯CSS搞定这个需求！你已经用box-shadow实现了底部的渐变边框，那左右侧边的渐变效果其实有几种很灵活的实现方式，下面给你详细拆解：

方法一：伪元素 + 线性渐变（最灵活） #

这种方法通过::before和::after伪元素分别创建左右两侧的渐变条纹，能和你已有的底部box-shadow完美配合：

/* 基础容器样式 */
.stripe-box {
  position: relative;
  width: 350px;
  height: 250px;
  padding: 2rem;
  background-color: #fff;
  /* 你已实现的底部渐变边框 */
  box-shadow: 0 4px 0 0 linear-gradient(to right, #ff7e5f, #feb47b);
}

/* 左侧渐变条纹 */
.stripe-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px; /* 边框宽度 */
  height: 100%;
  background: linear-gradient(to bottom, #ff7e5f, #feb47b); /* 垂直渐变 */
}

/* 右侧渐变条纹 */
.stripe-box::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, #ff7e5f, #feb47b);
}

为什么好用？ #

• 伪元素完全独立于容器内容，不会影响布局
• 可以单独调整每个侧边的渐变方向、颜色、宽度，比如给左侧用反向渐变
• 如果需要圆角边框，只需要给伪元素加上对应的border-radius即可

方法二：多背景层叠（更简洁） #

如果不想用伪元素，也可以直接用background-image的多背景特性，一次性实现所有侧边的渐变边框：

.stripe-box {
  width: 350px;
  height: 250px;
  padding: 2rem;
  /* 按顺序定义四个侧边的渐变背景 */
  background: 
    /* 左侧边框：左对齐，宽度4px，高度100% */
    linear-gradient(to bottom, #ff7e5f, #feb47b) left / 4px 100% no-repeat,
    /* 右侧边框：右对齐 */
    linear-gradient(to bottom, #ff7e5f, #feb47b) right / 4px 100% no-repeat,
    /* 底部边框：底部对齐，宽度100%，高度4px */
    linear-gradient(to right, #ff7e5f, #feb47b) bottom / 100% 4px no-repeat,
    /* 最后一层是容器背景色，避免透明 */
    #fff;
}

优势 #

• 无需额外元素或伪元素，代码更紧凑
• 天然支持圆角边框（给容器加border-radius即可，背景会自动适配）

小技巧调整 #

• 想要斜向渐变条纹？把linear-gradient的方向改成45deg即可，比如linear-gradient(45deg, #ff7e5f, #feb47b)
• 调整边框宽度？直接修改背景的4px数值就行
• 要顶部边框？在多背景里加一行linear-gradient(to right, #ff7e5f, #feb47b) top / 100% 4px no-repeat

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