CSS 分割线生成器
生成 9 种 CSS 分割线：实线、虚线、点线、双线、渐变线、带文字标题、波浪、斜纹与带图标，可调颜色、粗细、宽度与上下间距，实时预览并输出 CSS 与 HTML。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
实时预览
预览区直接渲染生成的 HTML 与 CSS，所见即所得
预设
点击预设直接套用
类型
尺寸与留白
2px
100%
24px
24px
CSS 代码
.divider {
width: 100%;
margin: 24px 0 24px;
border: 0;
border-top: 2px solid #94A3B8;
}HTML 片段
<hr class="uk-divider-preview" />
这个工具能做什么
- 做「或者用第三方登录」这类带文字的分隔线：文字两侧自动补上等长横线，不用再自己算 flex 布局。
- 给表单、卡片或列表块之间加一条统一的分隔线，颜色、粗细、宽度和上下留白一起调好再复制。
- 需要波浪线、斜纹这类装饰性分隔时，直接用渐变生成的背景图，省掉切图或 SVG。
- 九种类型（实线、虚线、点线、双线、渐变线、标题、波浪、斜纹、图标）可以逐个对比，挑出和页面风格最搭的一种。
示例
输入
类型「标题」：线条颜色 #94A3B8、粗细 2px、宽度 100%、上下间距 24px、文字「或者」、文字背景色 #FFFFFF
输出
.divider {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
margin: 24px 0 24px;
color: #94A3B8;
font-size: 14px;
}
.divider::before,
.divider::after {
content: '';
flex: 1;
border-top: 2px solid #94A3B8;
}
.divider span {
background: #FFFFFF;
padding: 0 4px;
}标题与图标类型用 div + ::before / ::after 实现，其余类型都是一条 <hr>；文字背景色要和页面底色一致才能盖住线条。
常见问题
为什么标题分隔线要设置「文字背景色」？
文字两侧的横线是 ::before / ::after 撑出来的，中间留出的空隙如果没有背景色，横线会从文字后面穿过去。把文字背景设成和容器底色相同，视觉上线条就像被文字截断了。
宽度为什么用百分比？
宽度是相对父容器的，取值 5%–100%，这样同一份 CSS 放进窄侧栏和宽正文都能自适应。想固定像素宽度，把生成的 width 改成 px 即可。
波浪线和斜纹线是真的画出来的吗？
不是图片，而是用 radial-gradient 和 repeating-linear-gradient 拼出来的背景图案：波浪线靠 repeat-x 的圆形背景平铺，斜纹靠 45° 重复渐变，所以能跟随颜色和粗细自动缩放。
数值超出范围会怎样？
粗细必须在 1–40px、宽度 5%–100%、上下间距 0–160px，超出或填了非数字会直接提示错误并不输出代码；颜色只接受 #RGB / #RGBA / #RRGGBB / #RRGGBBAA。
代码会上传到服务器吗？
不会。CSS 和 HTML 都是在浏览器里用字符串拼接生成的，页面不发任何网络请求，断网也能用。
关键词：cssdividerseparatorhr分割线分隔线标题分割线波浪线斜纹样式生成器