divide-x 和 divide-y 是在相邻兄弟元素间插入边框的布局控制类，需父容器为 flex/grid 且子元素严格相邻才生效；它们仅控制 border-left/top 的有无，线型、宽度、颜色须配合修饰类使用。

divide-x 和 divide-y 不是“加边框”的快捷方式，而是「在相邻兄弟元素之间插入边框」的布局逻辑控制类。它只在父容器启用 flex 或 grid、且子元素严格相邻（无空格/换行/注释）时才生效。

为什么写了 divide-y 却没看到线？

常见原因不是类写错了，而是布局前提没满足：

• 父容器缺少 flex 或 grid 类（比如只写了 divide-y 但容器是默认 block）
• 子元素之间有 HTML 换行或空格：<div>A</div>\n<div>B</div> → 破坏相邻兄弟关系，divide-y 失效
• 用了 columns-3 或 flow-root 等非标准流布局，divide 类完全不适用
• 子元素被包裹在额外的 <div> 或条件渲染节点中（如 React 的 Fragment），导致实际 DOM 中不相邻 <h3> <code>divide-x 和 divide-y 控制什么，不控制什么？

  divide-x 只在每个子元素左侧添加 border-left，divide-y 只在每个子元素顶部添加 border-top——它们本身不决定线型、宽度或颜色，只是触发这个行为：

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载
  • 线型必须用 divide-solid / divide-dashed / divide-dotted 显式声明；单独写 divide-x 默认是实线
  • 宽度由 divide-x-2 这类数字类控制，不是 border-2（后者作用于整个元素）
  • 颜色用 divide-gray-300，它等价于给所有受影响的 border 边设置 border-color，不是全局 color
  • divide-x 和 border-l-dashed 完全不同：后者是直接给单个元素设左虚线，前者是批量控制兄弟间逻辑分隔

  响应式下怎么让分隔线“从无线变虚线”？

  不能只给样式加断点前缀，必须把「启用」+「宽度」+「颜色」+「线型」全部带上断点——因为未加前缀的部分仍会生效：

  • 错的：divide-y md:divide-dashed → 移动端是 divide-y（实线），桌面才虚线
  • 对的：divide-y-0 sm:divide-y sm:divide-y-2 sm:divide-gray-300 sm:divide-dashed → 移动端无线，sm 起才有 2px 灰色虚线
  • 如果还要在 lg 上改双线：divide-y-0 sm:divide-y-2 sm:divide-gray-300 sm:divide-dashed lg:divide-double

  最易忽略的一点：divide-dashed 这类修饰类本身不生效，它必须和 divide-x 或 divide-y 同时出现，且 DOM 结构干净、布局模式匹配，否则就是白写。