如何用CSS将边框的上半部分设置为不同颜色？

以下是几种高效可行的实现方式，每种方案都附带代码示例和适用场景说明：

方法1：伪元素模拟局部边框 #

通过给元素添加伪元素，精准定位到顶部边框的前50%区域，覆盖原边框颜色：

.target-element {
  width: 240px;
  height: 240px;
  border: 3px solid #e0e0e0; /* 基础边框样式 */
  position: relative;
}

.target-element::before {
  content: "";
  position: absolute;
  top: -3px; /* 与原边框宽度一致，抵消边框偏移 */
  left: 0;
  width: 50%;
  height: 3px; /* 与原边框宽度匹配 */
  background-color: #2196f3; /* 目标变色 */
}

适用场景：仅需要顶部边框局部变色，结构简单，兼容性好。

方法2：线性渐变拼接边框 #

利用多段线性渐变分别定义四条边框，其中顶部边框设置50%的颜色分割：

.target-element {
  width: 240px;
  height: 240px;
  padding: 3px; /* 数值等于边框宽度 */
  background: 
    linear-gradient(90deg, #2196f3 50%, #e0e0e0 50%) top / 100% 3px,
    linear-gradient(#e0e0e0, #e0e0e0) left / 3px 100%,
    linear-gradient(#e0e0e0, #e0e0e0) right / 3px 100%,
    linear-gradient(#e0e0e0, #e0e0e0) bottom / 100% 3px;
  background-repeat: no-repeat;
}

适用场景：纯CSS背景实现，无需额外元素，适合需要灵活调整边框分段颜色的场景。

方法3：clip-path裁剪彩色边框 #

通过伪元素添加完整的彩色边框，再用clip-path裁剪出需要保留的上半部分区域：

.target-element {
  width: 240px;
  height: 240px;
  border: 3px solid #e0e0e0;
  position: relative;
}

.target-element::after {
  content: "";
  position: absolute;
  inset: -3px; /* 覆盖原元素整体区域 */
  border: 3px solid #2196f3;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); /* 仅保留上半部分边框 */
  pointer-events: none; /* 避免干扰原元素的交互事件 */
}

适用场景：需要让元素的上半周边框（顶部+左右边框上半段）整体变色的场景，视觉连贯度更高。

内容的提问来源于stack exchange，提问作者Kusal E. Amarasinghe