CSS文本装饰生成器
生成CSS text-decoration — 下划线、上划线或删除线，可选实线、点线、虚线、双线或波浪线，并自定义颜色、粗细和偏移 — 带实时预览，然后复制CSS和HTML。
输入
仅用于预览和HTML片段。
文字与下划线之间的距离 (text-underline-offset)。
输出
装饰后的文本将显示在这里。
text-decoration 声明
CSS
HTML
这对您有帮助吗？
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-text-decoration-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-text-decoration-generator` tool (CSS Text Decoration Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-text-decoration-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS文本装饰生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
CSS 的 text-decoration 属性可以为文本绘制线条：下划线、上划线和删除线。现代 CSS 还允许设置这些线条的样式，包括实线、双线、点线、虚线或波浪线，任意颜色以及自定义粗细。本生成器会在您自己的文本上展示效果，并提供可复制的 CSS。
使用方法
- 输入示例文本。 它仅用于预览和 HTML 片段。
- 选择线条类型： 下划线、上划线、删除线，或它们的组合。
- 选择样式、颜色和粗细。 红色波浪线是常见的"拼写检查"样式；点线和虚线适合链接和缩写。
- 调整下划线偏移和跳过字形。
text-underline-offset可以让下划线与文字拉开距离，text-decoration-skip-ink: auto会让线条绕开 g、j、y 等下行字母。 - 复制输出结果： 单行声明、完整的 CSS 规则，以及对应的 HTML 片段。
简写属性详解
text-decoration 是 text-decoration-line、text-decoration-style、text-decoration-color 和 text-decoration-thickness 的简写。偏移和跳过字形是独立的属性，因此生成的规则会将它们分别写在单独的行中。
无障碍提示
- 不要仅依靠颜色来标识链接。保留下划线，或使用其他提示。
- 对于需要保持可读性的文字（如价格、变更内容），删除线与背景之间应保持足够的对比度。
如需为文字添加阴影和发光效果，请参阅 CSS文本阴影生成器。如需渐变填充的文字，可以试试 CSS渐变文字生成器。
隐私
所有操作均在您的浏览器中完成。您的文本和设置永远不会被上传。
text decorationunderlinestrikethroughwavy underlineline-throughoverlinetext-underline-offsettypography