对这个基本问题的简单回答是否定的。唯一的跨浏览器选择是创建一个完成你想要的东西的黑客。在对已有的内容进行样式化时，这种方法确实存在一些潜在的问题，但与许多其他解决方案相比，它提供了更多的轮廓定制(偏移量、宽度、线条样式)。

在基本层面上，考虑以下静态示例(运行演示代码片段):

.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中，以模拟页面加载时的大纲。此外，可以建立事件绑定来显示或隐藏用户交互的大纲，就像这样(运行下面的代码片段或在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>

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

我有一个圆形边框的输入字段，想要改变焦点轮廓的颜色。我无法控制输入控件中可怕的方形轮廓。

所以我用了盒影。实际上我更喜欢阴影的平滑外观，但阴影可以被硬化以模拟圆形轮廓:

输入，输入:焦点{ 边界:没有; border - radius: 2分; Box-shadow: 0 0 0 1pt灰色; 大纲:没有; 过渡:1。; ｝ /*平滑的轮廓与盒子阴影:*/ .text1:专注{ 箱影:0 0 3pt 2pt矢车菊蓝; ｝ /*硬“轮廓”与盒子阴影:*/ .text2:专注{ 箱影:0 0 0 2pt红色; ｝ <输入class = " text1 " > < br > < br > <input type=text class="text2">

Chrome 94.0 +。

I tested it in chrome 94.0 and it seems that the outline property honors the border-radius now.

.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>

No. Borders sit on the outside of the element and on the inside of the box-model margin area. Outlines sit on the inside of the element and the box-model padding area ignores it. It isn't intended for aesthetics. It's just to show the designer the outlines of the elements. In the early stages of developing an html document for example, a developer might need to quickly discern if they have put all of the skeletal divs in the correct place. Later on they may need to check if various buttons and forms are the correct number of pixels apart from each other.

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

如果你试图应用一个角半径轮廓，我假设你使用它的方式大多数人使用边界。如果你不介意我问，outline的什么属性使它在边界上是可取的?

我在制作自定义单选按钮，我发现最好的自定义方法是使用伪元素，比如: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>

尝试使用填充和背景色的边框，然后为轮廓边框:

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

对我来说很管用。