如何仅用CSS为div的23%区域添加指定分隔边框？

可以利用CSS伪元素::before实现需求，无需修改HTML结构，具体代码如下：

.menu-slide-outer {
  position: relative; /* 为伪元素提供定位基准 */
  background: linear-gradient(180deg, #FFFFFF 23%, transparent 10%);
  /* 若原元素内容被伪元素遮挡，可按需添加padding-top调整 */
  padding-top: 0;
}

.menu-slide-outer::before {
  content: ""; /* 伪元素必填属性 */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 23%; /* 匹配渐变背景的白色区域高度 */
  border-top: 1px solid #你的边框颜色;
  border-left: 1px solid #你的边框颜色;
  border-right: 1px solid #你的边框颜色;
  border-bottom: 1px solid #你的分隔线颜色; /* 底部分隔线 */
  background-color: #FFFFFF; /* 与渐变顶部颜色一致，避免视觉断层 */
  z-index: -1; /* 若内容需显示在上方，可调整层级，按需设置 */
}

关键说明 #

• 给.menu-slide-outer设置position: relative，确保伪元素能基于该元素定位。
• 伪元素高度设为23%，刚好覆盖原渐变背景的白色区域。
• 通过四个边框属性直接实现顶部、左右侧边框和底部分隔线效果，背景色设为白色与原渐变区域保持统一。
• 如果原元素内的内容被伪元素遮挡，可调整伪元素的z-index值，或给原元素添加合适的padding-top避开伪元素区域。

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