如何制作无直线的自定义边框？附accordion标题悬停效果边框示例

一、无直线自定义边框的实现方法 #

当然可以制作无直线的自定义边框，常用的CSS方案有三种：

• 渐变背景模拟：用background-image结合线性/径向渐变，只绘制元素局部的边框效果
• 伪元素模拟：通过::before/::after伪元素创建独立的装饰线条，组合成不规则边框
• 裁剪路径：利用clip-path属性裁剪元素形状，搭配背景色实现特殊边框

二、你要的Accordion组件边框样式实现 #

根据你提供的示例图片，以下是可直接复用的代码：

HTML结构 #

<div class="accordion-container">
  <div class="accordion-item">
    <button class="accordion-title">
      折叠面板标题 1
      <span class="title-bottom-line"></span>
    </button>
    <div class="accordion-content">
      这里是折叠面板的内容区域，可根据需求添加文本、图片等内容。
    </div>
  </div>
  <div class="accordion-item">
    <button class="accordion-title">
      折叠面板标题 2
      <span class="title-bottom-line"></span>
    </button>
    <div class="accordion-content">
      这里是第二个折叠面板的内容，样式和第一个保持统一。
    </div>
  </div>
</div>

CSS样式 #

/* 容器基础样式 */
.accordion-container {
  width: 85%;
  margin: 30px auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 单个折叠项样式 */
.accordion-item {
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 标题栏核心样式 */
.accordion-title {
  width: 100%;
  padding: 16px 24px;
  background-color: #f7f8fa;
  border: none;
  text-align: left;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease;
}

/* hover时的特殊边框效果 */
.accordion-title:hover {
  background-color: #eff1f5;
}

/* 标题左右的短线条 */
.accordion-title:hover::before,
.accordion-title:hover::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 2px;
  background-color: #2d3748;
}

.accordion-title:hover::before {
  left: 0;
}

.accordion-title:hover::after {
  right: 0;
}

/* 标题底部的装饰线 */
.title-bottom-line {
  position: absolute;
  bottom: 0;
  left: 24px;
  right: 24px;
  height: 2px;
  background-color: #2d3748;
  transition: all 0.3s ease;
}

.accordion-title:hover .title-bottom-line {
  left: 18px;
  right: 18px;
}

/* 内容区域样式 */
.accordion-content {
  padding: 16px 24px;
  background-color: #ffffff;
  display: none;
}

.accordion-content.active {
  display: block;
}

你可以根据需求调整颜色、线条长度、间距等参数，完全匹配你的设计要求。

内容的提问来源于stack exchange，提问作者Majid A.