如何为300x300的div实现多纯色分段边框效果？

针对你300x300的div想要实现的半段纯色边框效果，这里提供两种符合需求的实现方式：

方法一：伪元素+背景色块（HTML结构简洁） #

这种方式仅需一个div，通过伪元素和背景的纯色线性渐变（起止色一致，实际就是纯色块）来模拟分段边框，完全规避渐变过渡效果：

<div class="half-border-box"></div>

.half-border-box {
  width: 300px;
  height: 300px;
  position: relative;
  background: #ffffff; /* 自定义背景色 */
}

.half-border-box::before,
.half-border-box::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  box-sizing: border-box;
}

/* 处理上下边框的分段 */
.half-border-box::before {
  border-top: 2px solid #ff4444; /* 上边框左半段颜色 */
  border-bottom: 2px solid #ff4444; /* 下边框右半段颜色 */
  /* 用背景色块补全另一半边框 */
  background: 
    linear-gradient(#2196f3, #2196f3) top right / 50% 2px no-repeat,
    linear-gradient(#2196f3, #2196f3) bottom left / 50% 2px no-repeat;
}

/* 处理左右边框的分段 */
.half-border-box::after {
  border-left: 2px solid #ff4444; /* 左边框下半段颜色 */
  border-right: 2px solid #ff4444; /* 右边框上半段颜色 */
  /* 用背景色块补全另一半边框 */
  background: 
    linear-gradient(#2196f3, #2196f3) top left / 2px 50% no-repeat,
    linear-gradient(#2196f3, #2196f3) bottom right / 2px 50% no-repeat;
}

方法二：分段元素模拟（直观易调整） #

如果需要单独控制每一段边框的样式，用多个空元素模拟每一段边框会更直观，调整起来更灵活：

<div class="half-border-box">
  <span class="border-segment"></span>
  <span class="border-segment"></span>
  <span class="border-segment"></span>
  <span class="border-segment"></span>
  <span class="border-segment"></span>
  <span class="border-segment"></span>
</div>

.half-border-box {
  width: 300px;
  height: 300px;
  position: relative;
  background: #ffffff; /* 自定义背景色 */
}

.border-segment {
  position: absolute;
}

/* 上边框左段 */
.half-border-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 2px;
  background: #ff4444;
}

/* 上边框右段 */
.border-segment:nth-child(1) {
  top: 0;
  right: 0;
  width: 50%;
  height: 2px;
  background: #2196f3;
}

/* 右边框上段 */
.border-segment:nth-child(2) {
  top: 0;
  right: 0;
  width: 2px;
  height: 50%;
  background: #2196f3;
}

/* 右边框下段 */
.border-segment:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 2px;
  height: 50%;
  background: #ff4444;
}

/* 下边框右段 */
.half-border-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 2px;
  background: #ff4444;
}

/* 下边框左段 */
.border-segment:nth-child(4) {
  bottom: 0;
  left: 0;
  width: 50%;
  height: 2px;
  background: #2196f3;
}

/* 左边框下段 */
.border-segment:nth-child(5) {
  bottom: 0;
  left: 0;
  width: 2px;
  height: 50%;
  background: #2196f3;
}

/* 左边框上段 */
.border-segment:nth-child(6) {
  top: 0;
  left: 0;
  width: 2px;
  height: 50%;
  background: #ff4444;
}

调整说明 #

• 代码中的2px是边框宽度，可根据需求修改；#ff4444和#2196f3是示例颜色，替换成你需要的纯色即可。
• 方法一的背景渐变只是用了相同的起止色，本质是纯色块，没有渐变过渡，完全符合纯色需求。

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