CSS Outline 生成器

可视化调节 outline 的宽度、样式、颜色与 offset 外偏移，实时预览外轮廓效果，并一键复制生成的 CSS 代码。outline 绘制在元素边框之外，不占据布局空间，常用于焦点高亮与强调。

轮廓参数已就绪

宽度

样式

颜色

#3366ff

offset 偏移

拖动滑块即可实时预览；offset 为正表示轮廓向外偏移，为负则向内收缩。

实时预览与代码

聚焦高亮

生成的 CSS 将显示在这里。

使用规则

outline 简写顺序为 outline: 宽度样式颜色;。
outline-offset 是独立属性，需单独声明。
宽度为 0 时不显示轮廓。
outline 无法像 border 那样分边设置。
本工具完全在浏览器本地运行，输入数据不会上传到任何服务器。