DigitalOcean 为您旅途的每个阶段提供云产品。 立即开始使用 $200 免费积分！
CSS 中的 outline 属性在元素外部绘制一条线。 它类似于 border，但
- 它始终围绕所有边，您无法指定特定边
- 它不是 盒子模型 的一部分，因此它不会影响元素或相邻元素的位置（非常适合调试！)
其他一些小细节包括它不尊重 border-radius（我认为这很有道理，因为它不是边框），并且它不总是矩形的。 例如，如果轮廓围绕具有不同字号的内联元素，Opera 将在整个元素周围绘制一个交错的框。
它通常用于可访问性目的，以在使用 Tab 键导航时突出显示链接，而不影响定位，并且以不同于悬停的方式。
a:focus {
outline: 1px dashed red;
}简写
outline: [ <outline-width> || <outline-style> || <outline-color> ] | inherit它采用与边框相同的属性，但使用“outline-”代替。
以上简写可以写成
a:focus {
outline-width: 1px;
outline-style: dashed;
outline-color: red;
}笔记
- 您无法仅在元素的一侧（或两侧、三侧）设置轮廓。 只能设置所有边。 没有像
border那样使用outline-top、outline-right、outline-bottom或outline-left。 - 尝试在任何网站上打开控制台并运行
document.head.insertAdjacentHTML("beforeend", "<style>* { outline: 1px solid red; }</style>");- 您将看到很多网站的结构。 outline默认用于:focus样式。 请记住，如果您要删除outline样式，例如a:focus { outline: 0; }，您需要使用其他一些视觉上不同的样式将其添加回来。
更多信息
浏览器支持
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 任何 | 1.2+ | 1.5+ | 7+ | 8+ | 任何 | 3.1+ |
我建议他们提交一项规则，允许我们指定轮廓显示在哪个边，并允许我们在轮廓上设置圆角以匹配我们的设计。 有时直边会破坏布局的外观。我知道我们可以关闭它们并使用 :focus 打开边框来实现，但为什么不让我们选择呢？ 我们对边框能做的任何事，都应该能够用轮廓属性来做。 应该有人把它提交给合适的人，以便将来改进。
我完全同意。 我希望只在一侧使用轮廓，比如
outline-right: 2px #333 solid;只需使用 outline: none; border-right: … 就能获得几乎一样的效果。
是的！谢谢。
outline : 0; 在 Chrome/Chromium 中需要用来移除输入框和文本区域元素周围的默认蓝色轮廓。
outline : 0; i
在 Chrome/Chromium 中需要用来移除输入框和文本区域元素周围的默认蓝色轮廓。
outline : 0;
在 Chrome/Chromium 中需要用来移除输入框和文本区域元素周围的默认蓝色轮廓。
有趣。 在 Firefox 31.0 上，我必须在包含图像的 DIV 上设置“outline-style: auto;”来修复一个奇怪的裁剪问题，每当图像在 DIV:hover 上 translateY(-20px):ed 时都会出现。 图像超出 DIV 盒模型的部分在正确显示之前会短暂裁剪。
还有一些其他组合也有效，比如“outline: 0px solid transparent”等等。 似乎默认值（至少在 Chrome 上）是“outline: 0px none rgb(255, 255, 255”。
我在 Chrome 和 IE 上都没有看到这个问题。
哎呀，在 Chrome 上设置“outline-style: auto”也会设置“outline-width: 3px”，所以我想最好的选择是使用“outline: 0 solid transparent”或类似的东西……
“1. 它始终围绕所有边，你不能指定特定的边”
反对，法官大人！ 这里又是一个辉煌的假设失败！
http://stackoverflow.com/questions/28142833/border-outline-html5-css3
我们最确定可以将边框图像边框设置为只在一侧。 所以这里最大的问题是。 如果我们使用边框图像，并且由于 img 是最初的 IE1+ 中保留轮廓的元素之一，那么为什么我们不能以某种方式编码该 [边框] 图像以显示其轮廓... 即使我们在只在一侧显示该 [边框] 图像时（例如，border-image-bottom）？
Burb [但你真的最好] 在 W3 上玩一次（如果你像我一样负担不起 codepen，哈哈）。
https://w3schools.org.cn/cssref/css3_pr_border-image.asp
那是边框，不是轮廓。 有区别。
你错过了重要的一点。 轮廓偏移。
警告：可访问性警报！
很多网页构建者不喜欢轮廓，并隐藏它们。 但是移除所有轮廓会让 Tab 用户无法看到他们处于哪个链接（鼠标用户可以通过指针悬停看到）。
指南是
http://www.w3.org/TR/WCAG20/#keyboard-operation（Web 内容无障碍指南 (WCAG) 2.0 / 指南 2.1：使所有功能都可通过键盘使用）。
幸运的是，有一个简单的解决方案可以为鼠标用户隐藏轮廓，同时保持 Tab 用户的可访问性！
查看
http://www.456bereastreet.com/archive/200910/remove_the_outline_from_links_on_active_only/
您好，我如何将其应用于我网站的移动版本？ 我理解有些人无法使用鼠标，所以我不想将其应用于桌面网站，当我将
添加到 css 输入区域时，它只会从桌面网站移除焦点边框，但会在平板电脑和手机上保留焦点边框，这发生在下拉菜单上。
{ outline:none;}
outline现在在 Firefox 88 及更高版本中遵循border-radius形状：https://hacks.mozilla.ac.cn/2021/04/never-too-late-for-firefox-88/outline现在在最新版本的 Chrome 中遵循border-radius形状。 太棒了！