免费在线CSS文本装饰生成器，可视化设置text-decoration系列属性，包括下划线、上划线、删除线、线型、线粗、偏移、颜色等参数，实时预览文字装饰效果，一键复制CSS代码。纯前端本地运行。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用装饰线选择
Updated: 2026-07-11
装饰线样式
预览
CSS 文本装饰效果预览 The quick brown fox jumps over the lazy dog
生成的 CSS 代码
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: 2px;
text-decoration-color: #06b6d4;
text-underline-offset: 4px;
CSS text-decoration 简写语法
text-decoration: underline solid #06b6d4 2px;
使用说明
CSS text-decoration 系列属性控制文本装饰线的外观：
• text-decoration-line — 指定装饰线类型：下划线(underline)、上划线(overline)、删除线(line-through)
• text-decoration-style — 线型：实线(solid)、双线(double)、点线(dotted)、虚线(dashed)、波浪线(wavy)
• text-decoration-thickness — 线的粗细（从细到粗）
• text-decoration-color — 装饰线颜色
• text-underline-offset — 下划线距文字基线的偏移距离
提示： 缩写语法：text-decoration: underline solid #06b6d4 2px;