CSS轮廓生成器
生成 CSS outline 和 outline-offset 声明——宽度、样式、颜色和间距——附带实时预览，并提供可直接使用的 :focus-visible 规则，用于无障碍焦点环。复制 CSS 和 HTML。
输入
仅用于预览和 HTML 代码片段。
元素边缘与轮廓线之间的间距。负值会将轮廓线绘制在内侧。
现代浏览器会让轮廓线跟随圆角。
将规则限定为键盘焦点，这是焦点环推荐的写法。
输出
带轮廓的盒子将显示在这里。
outline 声明
CSS
HTML
这对您有帮助吗？
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-outline-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-outline-generator` tool (CSS Outline Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-outline-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 的 outline 属性可以在元素周围绘制一条线，不会改变元素的尺寸，也不会推动相邻元素，这也是它与 border 的区别。它是键盘焦点环的基础。本生成器可以通过实时预览调整宽度、样式、颜色和 outline-offset，然后复制 CSS。
使用方法
- 设置宽度、样式和颜色。 提供八种样式：solid、dashed、dotted、double、groove、ridge、inset 和 outset。
- 调整偏移量。
outline-offset决定元素与线条之间的间距。负值会将轮廓线绘制在元素边缘的内侧。 - 选择圆角半径。 现代浏览器会让轮廓线跟随圆角。
- 开启"仅在 :focus-visible 时显示"，即可获得仅在键盘焦点时生效的规则，这是焦点环推荐的写法。
- 复制输出： 声明、完整的 CSS 规则以及对应的 HTML 代码片段。
轮廓与边框的区别
- 轮廓不占用布局空间，因此修改它不会使页面发生位移。
- 轮廓可以偏离元素放置，边框则不行。
- 轮廓在四边保持一致，并且在现代浏览器中会跟随
border-radius。
无障碍提示
- 没有可见的替代样式时，切勿写
outline: none。键盘用户依赖焦点环。 - 轮廓颜色与周围背景之间的对比度应达到 3:1。
- 2–3px 宽、2px 偏移的轮廓是清晰且广泛使用的默认值。
如需装饰性边框，可试试 CSS 边框样式生成器。如需柔和的光晕效果，请参阅 CSS 盒阴影生成器。
隐私
所有操作均在您的浏览器中完成。您的设置从不会被上传。
outlineoutline-offsetfocus ringfocus-visiblecss outlineaccessibilityborder alternative