如何创建带偏移线条的双色响应式卡片边框及hover效果？

问题根源分析 #

你之前的代码使用固定角度的线性渐变，当卡片尺寸变化时，渐变分割线的位置会因为角度固定而错位。要实现响应式效果，需要调整渐变的定义方式，或者改用更灵活的伪元素/多层背景方案。

方案1：对角线分割式双色边框（适配原需求） #

这种方案保留你最初的对角线双色设计，通过使用方向型渐变替代固定角度，确保尺寸变化时分割线始终沿对角线分布，同时添加hover切换效果：

<div class="apps-card">
  <div class="card-body">
    <!-- 卡片内容 -->
  </div>
</div>

.apps-card {
  height: 300px;
  width: 250px;
  position: relative;
  overflow: hidden;
  margin: 200px 0 0 200px;
  /* 使用to bottom right方向，确保对角线随卡片尺寸自适应 */
  background: linear-gradient(to bottom right, purple 50%, #097978 50%);
  transition: background 0.3s ease;
}

.card-body {
  position: absolute;
  inset: 4px; /* 替代left/right/top/bottom，更简洁的写法 */
  background-color: #fff;
  padding: 1rem; /* 给内容预留内边距 */
}

/* Hover时交换双色位置 */
.apps-card:hover {
  background: linear-gradient(to bottom right, #097978 50%, purple 50%);
}

优势：

• 完全匹配你最初的设计思路
• 响应式适配任意卡片尺寸，分割线始终为对角线
• 代码简洁，hover效果实现成本低

方案2：四边独立双色边框（更灵活的设计） #

如果需要实现"左右边/上下边分别使用不同颜色"的偏移边框，推荐使用多层线性渐变来单独控制四个边的样式，同样支持完全响应式和hover切换：

<div class="apps-card">
  <div class="card-body">
    <!-- 卡片内容 -->
  </div>
</div>

.apps-card {
  height: 300px;
  width: 250px;
  position: relative;
  margin: 200px 0 0 200px;
  /* 四层渐变分别控制左、下、右、上四个边的颜色和尺寸 */
  background: 
    linear-gradient(to bottom, purple 100%) left / 4px 100% no-repeat,
    linear-gradient(to right, purple 100%) bottom / 100% 4px no-repeat,
    linear-gradient(to bottom, #097978 100%) right / 4px 100% no-repeat,
    linear-gradient(to right, #097978 100%) top / 100% 4px no-repeat;
  background-color: #fff;
  transition: all 0.3s ease;
}

.card-body {
  padding: 1rem;
}

/* Hover时交换四边颜色 */
.apps-card:hover {
  background: 
    linear-gradient(to bottom, #097978 100%) left / 4px 100% no-repeat,
    linear-gradient(to right, #097978 100%) bottom / 100% 4px no-repeat,
    linear-gradient(to bottom, purple 100%) right / 4px 100% no-repeat,
    linear-gradient(to right, purple 100%) top / 100% 4px no-repeat;
}

优势：

• 可单独控制每个边的颜色、宽度
• 完全响应式，适配任意卡片宽高
• hover效果可自定义更多细节（比如只改变某几个边的颜色）

内容的提问来源于stack exchange，提问作者Александр Мерный