如何使用CSS隐藏ngb accordion panel对应div的部分边框区域

推荐两种可直接落地的实现方式，按需选择即可：

方案1：背景渐变实现（推荐，不占用伪元素） #

不需要修改原有DOM结构，直接替换原有边框属性即可，适配响应式场景：

/* 假设原ngb panel选择器为.ngb-accordion .card，可替换为你自己的自定义类 */
.ngb-accordion .card {
  /* 移除原有默认的左边框、下边框 */
  border-left: none !important;
  border-bottom: none !important;

  /* 用渐变绘制两条边框线 */
  background-image: 
    linear-gradient(#ccc, #ccc), /* 左边框纯色填充，#ccc替换为你的边框色 */
    linear-gradient(#ccc, #ccc); /* 下边框纯色填充 */

  /* 分别设置两个边框的尺寸：[宽度 高度] */
  background-size: 
    1px 90%, /* 左边框宽1px，高90% → 首尾各隐藏5% */
    80% 1px; /* 下边框宽80%，高1px → 首尾各隐藏10% */

  /* 分别设置两个边框的定位 */
  background-position: 
    left 0 top 0, /* 左边框左对齐、上对齐 */
    left 10% bottom 0; /* 下边框左偏移10%、底对齐 */

  background-repeat: no-repeat;
  /* 原有其他样式保留即可 */
}

参数调整说明：

• 修改边框宽度：调整background-size里的1px数值即可
• 修改隐藏比例：左边框调整90%（显示高度占比），下边框调整80%（显示宽度占比），同时同步调整background-position里的偏移量（比如下边框要隐藏首尾各15%，则显示宽度为70%，偏移量改为15%）

方案2：伪元素实现（逻辑直观，兼容性好） #

如果需要兼容极低版本浏览器，或者对渐变语法不熟悉可以用这个方案：

.ngb-accordion .card {
  position: relative;
  /* 移除原有默认的左边框、下边框 */
  border-left: none !important;
  border-bottom: none !important;
}

/* 绘制左边框 */
.ngb-accordion .card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5%; /* 顶部偏移5%，隐藏头部5%区域 */
  width: 1px; /* 边框宽度 */
  height: 90%; /* 显示高度占90%，底部自动隐藏5% */
  background-color: #ccc; /* 边框色 */
}

/* 绘制下边框 */
.ngb-accordion .card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%; /* 左侧偏移10%，隐藏头部10%区域 */
  width: 80%; /* 显示宽度占80%，右侧自动隐藏10% */
  height: 1px; /* 边框宽度 */
  background-color: #ccc; /* 边框色 */
}

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