如何用CSS实现半透明卡片及中心相邻边框加深效果

要实现卡片中心相邻边框部分颜色稍深的效果，推荐两种简洁的CSS实现方式：

方法一：背景渐变模拟边框（无额外HTML元素） #

利用线性渐变精确控制边框不同区域的颜色，直接通过背景属性实现效果：

<div class="card">
  卡片内容示例
</div>

.card {
  width: 320px;
  height: 220px;
  /* 依次定义上下左右四条边框的渐变效果 */
  background: 
    /* 上边框：两侧浅色，中间深色 */
    linear-gradient(to right, #e0e0e0, #888 45%, #888 55%, #e0e0e0) top/100% 2px no-repeat,
    /* 下边框：同上方框逻辑 */
    linear-gradient(to right, #e0e0e0, #888 45%, #888 55%, #e0e0e0) bottom/100% 2px no-repeat,
    /* 左边框：上下浅色，中间深色 */
    linear-gradient(to bottom, #e0e0e0, #888 45%, #888 55%, #e0e0e0) left/2px 100% no-repeat,
    /* 右边框：同左边框逻辑 */
    linear-gradient(to bottom, #e0e0e0, #888 45%, #888 55%, #e0e0e0) right/2px 100% no-repeat;
  padding: 24px;
  box-sizing: border-box;
  border-radius: 8px; /* 可选：添加圆角优化视觉 */
}

通过调整渐变中的百分比（45%和55%）可以控制深色区域的宽度，修改颜色值适配你的设计风格。

方法二：伪元素叠加深色线段 #

通过伪元素在原有边框的中心位置叠加深色线段，适合需要保留真实边框属性的场景：

<div class="card">
  <div class="vertical-lines"></div>
  卡片内容示例
</div>

.card {
  width: 320px;
  height: 220px;
  border: 2px solid #e0e0e0;
  position: relative;
  padding: 24px;
  box-sizing: border-box;
  border-radius: 8px;
}

/* 上下边框的深色线段 */
.card::before, .card::after {
  content: "";
  position: absolute;
  background-color: #888;
  width: 24%;
  height: 2px;
  left: 38%;
}
.card::before {
  top: -2px; /* 与上边框对齐 */
}
.card::after {
  bottom: -2px; /* 与下边框对齐 */
}

/* 左右边框的深色线段 */
.vertical-lines::before, .vertical-lines::after {
  content: "";
  position: absolute;
  background-color: #888;
  width: 2px;
  height: 24%;
  top: 38%;
}
.vertical-lines::before {
  left: -2px; /* 与左边框对齐 */
}
.vertical-lines::after {
  right: -2px; /* 与右边框对齐 */
}

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