【问题标题】：Outline radius?轮廓半径？
【发布时间】：2011-07-20 15:06:39
【问题描述】：

有没有办法在div 元素的轮廓上获得圆角，类似于border-radius？

【问题讨论】：

好吧，我有一个 2px 灰色边框和 20px 边框半径的 Div 框，如果我可以在该边框周围有一个 10px 的 Outine 跟随边框而不是正方形，我正在徘徊跨度>
这是个好问题。带有border: 5px red 和outline: 5px blue 和border-radius: 5px 的元素，边框是圆形的，但轮廓是方形的。
目前只能在Firefox中使用：-moz-outline-radius
你们的生活中都需要一个box-shadow..
这是 CSS 大神们的巨大失误。

标签： html css

【解决方案1】：

现在是老问题，但这可能与有类似问题的人有关。我有一个四舍五入的输入字段border 并想更改焦点轮廓的颜色。我无法驯服输入控件的可怕方形轮廓。

因此，我使用了box-shadow。我实际上更喜欢阴影的平滑外观，但阴影可以硬化以模拟圆形轮廓：

input, input:focus {
    border: none;
    border-radius: 2pt;
    box-shadow: 0 0 0 1pt grey;
    outline: none;
    transition: .1s;
}
/* Smooth outline with box-shadow: */
.text1:focus {
    box-shadow: 0 0 3pt 2pt cornflowerblue;
}

/* Hard "outline" with box-shadow: */
.text2:focus {
    box-shadow: 0 0 0 2pt red;
}

<input class="text1"> 
<br>
<br>
<input type=text class="text2">

【讨论】：

IMO，这就是您正在寻找的答案。我已经完成了这个方法，但不要忽视将你的大纲变为 0。
这正是我想要的，比轮廓半径更适合。
硬大纲示例不起作用。它只是一个没有圆角半径的矩形。
outline: 0 破坏了网络可访问性；阅读outlinenone.com
@ianstarz，当您不提供其他样式时，它会破坏可访问性。 box-shadow 是另一种样式（如此处所示，实际上在外观上与outline 非常相似）。

【解决方案2】：

我通常使用 :after 伪元素来完成此操作：

当然这取决于使用情况，这种方法允许控制单个边框，而不是使用硬阴影方法。

您还可以设置 -1px 偏移并再次使用背景线性渐变（无边框）来获得不同的效果。

body {
  margin: 20px;
}

a {
  background: #999;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  color: #fff;
  position: relative;
  border: 2px solid #000;
}

a:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 5px;
  border: 2px solid #ccc;
}

&lt;a href="#"&gt;Button&lt;/a&gt;

【讨论】：

修改后的更壮观的版本：jsfiddle.net/rh6j3cdm.
无法为输入字段创建 ::after 伪
谢谢，这与 react-sortable-tree 的搜索查询大纲配合得非常好！
我喜欢这个解决方案，因为它比box-shadow 版本灵活得多。例如，如果您希望“轮廓”与元素隔开（即模拟outline-offset），则可以使用此技术。
如果你在 div 上使用它，你应该把 content 属性排除在外，因为它会删除里面的所有功能

【解决方案3】：

类似于上面的 Lea Hayes，但我是这样做的：

div {
  background: #999;
  height: 100px;
  width: 200px;
  border: #999 solid 1px;
  border-radius: 10px;
  margin: 15px;
  box-shadow: 0px 0px 0px 1px #fff inset;
}

&lt;div&gt;&lt;/div&gt;

不需要嵌套 DIV 或 jQuery，为了简洁起见，我省略了一些 CSS 的 -moz 和 -webkit 变体。可以看到上面的结果

【讨论】：

他说的是轮廓，而不是边界……“轮廓”半径
正确，但由于轮廓半径不可用，我的方法给出了边框和轮廓的外观。这是一种视觉效果，因此除非 Marc 的设计是按像素指定的，否则它实际上不使用轮廓属性这一事实没有任何区别。由于这是一个实用的解决方案，我很感激投票支持
这很好用。不过，我没有使用inset，得到了我想要的。

【解决方案4】：

使用这个： box-shadow: 0px 0px 0px 1px red;

【讨论】：

【解决方案5】：

我希望在 Bootstrap 导航栏中为下拉菜单提供一些不错的焦点可访问性，并且对此非常满意：

     a.dropdown-toggle:focus {
         display: inline-block;
         box-shadow: 0 0 0 2px #88b8ff;
         border-radius: 2px;
     }

&lt;a href="https://stackoverflow.com" class="dropdown-toggle"&gt;Visit Stackoverflow&lt;/a&gt;

【讨论】：

【解决方案6】：

通过设置outline-style: auto，我们可能会很快看到我们的愿望，它在 WebKits 的雷达上：http://trac.webkit.org/changeset/198062/webkit

2030 年见。

【讨论】：

非常酷，尽管这仍有一些不足之处，但我的用例是outline-style: dashed 也有一个半径（就像你可以使用边框一样）。目前只有 Firefox 通过其-moz-outline-radius 支持此功能
用例受到严重限制。您无法设置宽度或其他任何内容。

【解决方案7】：

我想你正在寻找something like this。

div {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid black;
    background-color: #CCC;
    height: 100px;
    width: 160px;
}

编辑

有一个仅适用于 Firefox 的 -moz-outline-radius，但它不适用于 IE/Chrome/Safari/Opera/etc。因此，看起来最跨浏览器兼容的方式^* 在边框周围获得曲线是使用包装器 div：

div.inner {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid black;
  background-color: #CCC;
  height: 100px;
  width: 160px;
}

div.outer {
  display: inline-block;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid red;
}

<div class="outer">
  <div class="inner"></div>
</div>

^{^*除了使用图片}

【讨论】：

不，如果你能得到轮廓半径，我知道如何得到我一直在徘徊的边界半径
究竟是什么意思？像这样更粗的轮廓？ jsfiddle.net/mattball/NXZFv/1
@Matt：很明显，弯曲的 outline 而不是 border。见w3.org/TR/CSS21/ui.html#dynamic-outlines
好吧，我有一个带有 2px 灰色边框和 20px 边框半径的 Div 框，我在徘徊，如果我可以在该边框周围有一个 10px 的轮廓，它跟随边框而不是正方形。
只是对代码 matt 的一个补充，如果您在内框上将边框半径降低几 px，那么角会变得更紧，感谢您的帮助

【解决方案8】：

据我所知，Outline radius 仅受 Firefox 和 Firefox for android 支持。
（2021 年 7 月）

-moz-outline-radius: 1em;

【讨论】：

【解决方案9】：

我刚刚找到了一个很好的解决方案，在查看了到目前为止的所有回复之后，我还没有看到它发布。所以，这就是我所做的：

我为该类创建了一个 CSS 规则，并为该规则使用了一个 :focus 伪类。我设置 outline: none 以摆脱 Chrome 默认使用的默认浅蓝色非边界半径“轮廓”。然后，在同一个:focus 伪类中，轮廓不再存在，我添加了我的半径和边框属性。导致以下情况

outline: none;
border-radius: 5px;
border: 2px solid maroon;

当用户通过选项卡选择元素时，现在会出现带有边框半径的栗色轮廓。

【讨论】：

使用 "outline: 0" 或 "outline: none" 被认为是不好的做法，会破坏用户的可访问性。在这一点上，我没有解决办法，但这里有一篇文章，说明为什么尽可能不删除大纲，以及如果绝对必须要怎么做。 Never remove CSS outlines

【解决方案10】：

Firefox 88+：边框半径

从 2021 年 4 月起，您将能够为 Firefox 使用简单的 CSS：

.actual {
  outline: solid red;
  border-radius: 10px;
}

.expected {
  border: solid red;
  border-radius: 10px;
}

In Firefox 88+,
<span class="actual">this outline</span>
should look like
<span class="expected">this border</span>

Firefox 86.0 中的当前行为：

Webkit：没有解决办法

使用outline-style: auto 将告诉«用户代理呈现自定义轮廓样式»：请参阅 [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style( .

当您使用outline-style: auto 时，基于Webkit 的浏览器将在边框上绘制轮廓。很难正确地设置它的样式。

.actual {
  outline: auto red;
  border-radius: 10px;
}

.expected {
  border: solid red;
  border-radius: 10px;
}

In WebKit browsers (Chrome, Edge),
<span class="actual">this outline</span>
should look close to
<span class="expected">this border</span>

Chrome 89.0 中的当前行为：

更多信息

从 Firefox 88（即将发布April 20 2021）开始，轮廓将遵循边框半径的形状。
当前的-moz-outline-radius 将变得多余并被删除。

见MDN's entry about -moz-outline-radius:

从 Firefox 88 开始，标准的轮廓属性将遵循边框半径的形状，使得 -moz-outline-radius 属性变得多余。因此，此属性将被删除。

【讨论】：

【解决方案11】：

如果您想获得浮雕外观，您可以执行以下操作：

.embossed {
  background: #e5e5e5;
  height: 100px;
  width: 200px;
  border: #FFFFFF solid 1px;
  outline: #d0d0d0 solid 1px;
  margin: 15px;
}

.border-radius {
  border-radius: 20px 20px 20px 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -khtml-border-radius: 20px;
}

.outline-radius {
  -moz-outline-radius: 21px;
}

<div class="embossed"></div>
<div class="embossed border-radius"></div>
<div class="embossed border-radius outline-radius">-MOZ ONLY</div>

我还没有找到在其他浏览器中进行这项工作的解决方法。

编辑：您可以做到这一点的唯一其他方法是使用 box-shadow，但如果您已经在该元素上有一个 box-shadow，那么这将不起作用。

【讨论】：

你可以在同一个元素上使用多个阴影，用逗号分隔它们。

【解决方案12】：

正如其他人所说，只有Firefox支持这一点。这是一个解决方法，它做同样的事情，甚至可以使用虚线轮廓。

.has-outline {
    display: inline-block;
    background: #51ab9f;
    border-radius: 10px;
    padding: 5px;
    position: relative;
}
.has-outline:after {
  border-radius: 10px;
  padding: 5px;
  border: 2px dashed #9dd5cf;
  position: absolute;
  content: '';
  top: -2px;
  left: -2px;
  bottom: -2px;
  right: -2px;
}

<div class="has-outline">
  I can haz outline
</div>

【讨论】：

这是不准确的。在你的图片中，我可以看到轮廓圆角和背景圆角之间的白色小间隙。

【解决方案13】：

没有。边框位于元素的外部和盒子模型边缘区域的内部。轮廓位于元素内部，盒子模型填充区域忽略它。它不是为了美学。只是为了向设计师展示元素的轮廓。例如，在开发 html 文档的早期阶段，开发人员可能需要快速辨别他们是否已将所有骨架 div 放置在正确的位置。稍后他们可能需要检查各种按钮和表单之间的像素数是否正确。

边界本质上是审美的。与轮廓不同，它们实际上是盒子模型的一部分，这意味着它们不会与设置为 margin: 0 的文本重叠；并且边框的每一侧都可以单独设置样式。

如果您尝试将圆角半径应用于轮廓，我假设您使用它的方式与大多数人使用边框的方式相同。所以如果你不介意我问，轮廓的什么属性使它在边框上是可取的？

【讨论】：

大纲的目的是为了键盘导航/可访问性，而不是向开发人员展示元素的位置
这就是浏览器默认使用它们的目的。但我一直使用它们来查看我的 div 在哪里，效果很好。
+1 提到“边框位于元素的外部和盒子模型边缘区域的内部。轮廓位于元素的内部，盒子模型的填充区域忽略它。”
@danwellman 也许你不知道，但很多人都会这样做，尤其是对于利润由严格的规则和标准定义的商业设计。
"outline 的什么属性使它在边框上是可取的" Outline 允许你使用轮廓偏移，使它看起来离元素更远，就好像它被放大了一样。我无法通过边框或阴影轻松获得类似的结果。

【解决方案14】：

Chrome 94.0+

我在 chrome 94.0 中对其进行了测试，现在轮廓属性似乎符合边框半径。

.outline {
  outline: 2px solid red;
}

.border {
  border: 2px solid red;
}

.outline-10 {
  border-radius: 10px;
}

.border-2 {
  border-radius: 2px;
}

.outline-2 {
  border-radius: 2px;
}

.border-10 {
  border-radius: 10px;
}

.outline-50 {
  border-radius: 50%;
}

.border-50 {
  border-radius: 50%;
}

.circle {
  display: inline-block; 
  width:50px; 
  height: 50px;
}

<strong>Test this in chrome 94.0+</strong>
<br/><br/>
border-radius: 2px
<span class="outline outline-2">outline</span>
<span class="border border-2">border</span>
<br/><br/>
border-radius: 10px
<span class="outline outline-10">outline</span>
<span class="border border-10">border</span>
<br/><br/>
border-radius: 50%
<span class="outline outline-50">outline</span>
<span class="border border-50">border</span>
<span class="outline circle outline-50">outline</span>
<span class="border circle border-50">border</span>

【讨论】：

【解决方案15】：

如果您只需要没有边框的轮廓，则有解决方案。不是我的。我从 Bootstrap css 文件中得到了 if 。如果您指定outline: 1px auto certain_color，您将在特定颜色的 div 周围获得细外线。在这种情况下，指定的宽度无关紧要，即使您指定 10 px 宽度，无论如何它都会是细线。上述规则中的关键词是“auto”。
如果您需要具有圆角和一定宽度的轮廓，您可以在具有所需宽度和相同颜色的边框上添加 css 规则。它使轮廓更粗。

【讨论】：

【解决方案16】：

组合框阴影和轮廓。

Lea Hayes 的回答略有不同我找到了

input[type=text]:focus {
    box-shadow: 0 0 0 1pt red;
    outline-width: 1px;
    outline-color: red;
}

得到一个非常干净的完成。使用border-radius时不会出现尺寸跳跃

【讨论】：

【解决方案17】：

我正在制作自定义单选按钮，我发现最好的自定义方式是使用这样的伪元素：Codepen

/*CSS is compiled from SCSS*/

.product-colors {
  margin-bottom: 1em;
  display: flex;
  align-items: center;
}
.product-colors label {
  position: relative;
  width: 2.1em;
  height: 2.1em;
  margin-right: 0.8em;
  cursor: pointer;
}
.product-colors label:before {
  opacity: 0;
  width: inherit;
  height: inherit;
  padding: 2px;
  border: 2px solid red;
  border-radius: 0.2em;
  content: "";
  position: absolute;
  z-index: 1;
  background: transparent;
  top: -4px;
  left: -4px;
}
.product-colors input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.product-colors input:checked + label:before, .product-colors input:focus + label:before {
  opacity: 1;
}

<div class="product-colors">
  <input type="radio" name="cs" id="cs1" value="black">
  <label for="cs1" style="background:black"></label>
  <input type="radio" name="cs" id="cs2" value="green">
  <label for="cs2" style="background:green"></label>
  <input type="radio" name="cs" id="cs3" value="blue">
  <label for="cs3" style="background:blue"></label>
  <input type="radio" name="cs" id="cs4" value="yellow">
  <label for="cs4" style="background:yellow"></label>
</div>

【讨论】：

【解决方案18】：

clip-path: circle(100px at center);

这实际上只会使可点击的圆形，而border-radius仍然是一个正方形，但看起来像圆形。

【讨论】：

【解决方案19】：

基本问题的简单答案是否定的。唯一的跨浏览器选项是创建一个 hack 来完成你想要的。 在样式化预先存在的内容时，这种方法确实存在某些潜在问题，但它提供了比许多其他解决方案更多的轮廓自定义（偏移量、宽度、线条样式）。

在基本层面上，考虑以下静态示例（运行代码片段进行演示）：

.outline {
    border: 2px dotted transparent;
    border-radius: 5px;
    display: inline-block;
    padding: 2px;
    margin: -4px;
}

/* :focus-within does not work in Edge or IE */
.outline:focus-within, .outline.edge {
    border-color: blue;
}

br {
    margin-bottom: 0.75rem;
}

<h3>Javascript-Free Demo</h3>
<div class="outline edge"><input type="text" placeholder="I always have an outline"/></div><br><div class="outline"><input type="text" placeholder="I have an outline when focused"/></div> *<i>Doesn't work in Edge or IE</i><br><input type="text" placeholder="I have never have an outline" />
<p>Note that the outline does not increase the spacing between the outlined input and other elements around it. The margin (-4px) compensates for the space that the outlines padding (-2px) and width (2px) take up, a total of 4px.</p>

现在，在更高级的层面上，可以使用 JavaScript 引导给定类型或类的元素，以便将它们包装在模拟页面加载时的大纲的 div 中。此外，可以建立事件绑定来显示或隐藏用户交互的轮廓，如下所示（运行下面的 sn-p 或在JSFiddle 中打开）：

h3 {
  margin: 0;
}

div {
  box-sizing: border-box;
}

.flex {
  display: flex;
}

.clickable {
  cursor: pointer;
}

.box {
  background: red;
  border: 1px solid black;
  border-radius: 10px;
  height: 5rem;
  display: flex;
  align-items: center;
  text-align: center;
  color: white;
  font-weight: bold;
  padding: 0.5rem;
  margin: 1rem;
}

<h3>Javascript-Enabled Demo</h3>
<div class="flex">
  <div class="box outline-me">I'm outlined because I contain<br>the "outline-me" class</div>
  <div class="box clickable">Click me to toggle outline</div>
</div>
<hr>
<input type="text" placeholder="I'm outlined when focused" />

<script>
// Called on an element to wrap with an outline and passed a styleObject
// the styleObject can contain the following outline properties:
// 		style, width, color, offset, radius, bottomLeftRadius,
//		bottomRightRadius, topLeftRadius, topRightRadius
// It then creates a new div with the properties specified and 
// moves the calling element into the div
// The newly created wrapper div receives the class "simulated-outline"
Element.prototype.addOutline = function (styleObject, hideOutline = true) {
    var element = this;

    // create a div for simulating an outline
    var outline = document.createElement('div');

    // initialize css formatting
    var css = 'display:inline-block;';

    // transfer any element margin to the outline div
    var margins = ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'];
    var marginPropertyNames = { 
        marginTop: 'margin-top',
        marginBottom: 'margin-bottom',
        marginLeft: 'margin-left',
        marginRight: 'margin-right'
    }
    var outlineWidth = Number.parseInt(styleObject.width);
    var outlineOffset = Number.parseInt(styleObject.offset);
    for (var i = 0; i < margins.length; ++i) {
        var computedMargin = Number.parseInt(getComputedStyle(element)[margins[i]]);
        var margin = computedMargin - outlineWidth - outlineOffset;
        css += marginPropertyNames[margins[i]] + ":" + margin + "px;";
    }
    element.style.cssText += 'margin:0px !important;';
    
    // compute css border style for the outline div
    var keys = Object.keys(styleObject);
    for (var i = 0; i < keys.length; ++i) {
        var key = keys[i];
        var value = styleObject[key];
        switch (key) {
            case 'style':
                var property = 'border-style';
                break;
            case 'width':
                var property = 'border-width';
                break;
            case 'color':
                var property = 'border-color';
                break;
            case 'offset':
                var property = 'padding';
                break;
            case 'radius':
                var property = 'border-radius';
                break;
            case 'bottomLeftRadius':
                var property = 'border-bottom-left-radius';
                break;
            case 'bottomRightRadius':
                var property = 'border-bottom-right-radius';
                break;
            case 'topLeftRadius':
                var property = 'border-top-left-radius-style';
                break;
            case 'topRightRadius':
                var property = 'border-top-right-radius';
                break;
        }
        css += property + ":" + value + ';';
    }
    
    // apply the computed css to the outline div
    outline.style.cssText = css;
    
    // add a class in case we want to do something with elements
    // receiving a simulated outline
    outline.classList.add('simulated-outline');
    
    // place the element inside the outline div
    var parent = element.parentElement;
    parent.insertBefore(outline, element);
    outline.appendChild(element);

    // determine whether outline should be hidden by default or not
    if (hideOutline) element.hideOutline();
}

Element.prototype.showOutline = function () {
    var element = this;
    // get a reference to the outline element that wraps this element
    var outline = element.getOutline();
    // show the outline if one exists
    if (outline) outline.classList.remove('hide-outline');
}


Element.prototype.hideOutline = function () {
    var element = this;
    // get a reference to the outline element that wraps this element
    var outline = element.getOutline();
    // hide the outline if one exists
    if (outline) outline.classList.add('hide-outline');
}

// Determines if this element has an outline. If it does, it returns the outline
// element. If it doesn't have one, return null.
Element.prototype.getOutline = function() {
    var element = this;
    var parent = element.parentElement;
    return (parent.classList.contains('simulated-outline')) ? parent : null;
}

// Determines the visiblity status of the outline, returning true if the outline is
// visible and false if it is not. If the element has no outline, null is returned.
Element.prototype.outlineStatus = function() {
    var element = this;
    var outline = element.getOutline();
    if (outline === null) {
        return null;
    } else {
        return !outline.classList.contains('hide-outline');
    }
}

// this embeds a style element in the document head for handling outline visibility
var embeddedStyle = document.querySelector('#outline-styles');
if (!embeddedStyle) {
    var style = document.createElement('style');
    style.innerText = `
        .simulated-outline.hide-outline {
            border-color: transparent !important;
        }
    `;
    document.head.append(style);
}


/*########################## example usage ##########################*/

// add outline to all elements with "outline-me" class
var outlineMeStyle = {
    style: 'dashed',
    width: '3px',
    color: 'blue',
    offset: '2px',
    radius: '5px'
};
document.querySelectorAll('.outline-me').forEach((element)=>{
  element.addOutline(outlineMeStyle, false);
});


// make clickable divs get outlines
var outlineStyle = {
    style: 'double',
    width: '4px',
    offset: '3px',
    color: 'red',
    radius: '10px'
};
document.querySelectorAll('.clickable').forEach((element)=>{
    element.addOutline(outlineStyle);
    element.addEventListener('click', (evt)=>{
        var element = evt.target;
        (element.outlineStatus()) ? element.hideOutline() : element.showOutline();
    });
});


// configure inputs to only have outline on focus
document.querySelectorAll('input').forEach((input)=>{
    var outlineStyle = {
        width: '2px',
        offset: '2px',
        color: 'black',
        style: 'dotted',
        radius: '10px'
    }
    input.addOutline(outlineStyle);
    input.addEventListener('focus', (evt)=>{
        var input = evt.target;
        input.showOutline();
    });
    input.addEventListener('blur', (evt)=>{
        var input = evt.target;
        input.hideOutline();
    });
});
</script>

最后，让我重申一下，实施这种方法可能需要比我在演示中包含的更多样式，特别是如果您已经为想要概述的元素设置了样式。

【讨论】：

【解决方案20】：

尝试使用填充和背景颜色作为边框，然后使用边框作为轮廓：

.round_outline {
  padding: 8px;
  background-color: white;
  border-radius: 50%;
  border: 1px solid black;
}

在我的情况下工作。

【讨论】：

【解决方案21】：

我只是将轮廓设置为透明。

input[type=text] {
  outline: rgba(0, 0, 0, 0);
  border-radius: 10px;
}

input[type=text]:focus {    
  border-color: #0079ff;
}

【讨论】：

【解决方案22】：

我喜欢这种方式。

.circle:before {
   content: "";
   width: 14px;
   height: 14px;
   border: 3px solid #fff;
   background-color: #ced4da;
   border-radius: 7px;
   display: inline-block;
   margin-bottom: -2px;
   margin-right: 7px;
   box-shadow: 0px 0px 0px 1px #ced4da;
}

它会创建一个灰色的圆圈，周围有智慧的边框，然后又是 1px 的边框！

【讨论】：