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

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

对我来说很管用。

你可以用盒子阴影代替这样的轮廓

    box-shadow: 0 0 1px #000000;
    border-radius: 50px;
    outline: none;

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

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

输入，输入:焦点{ 边界:没有; 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">

There is the solution if you need only outline without border. It's not mine. I got if from Bootstrap css file. If you specify outline: 1px auto certain_color, you'll get thin outer line around div of certain color. In this case the specified width has no matter, even if you specify 10 px width, anyway it will be thin line. The key word in mentioned rule is "auto". If you need outline with rounded corners and certain width, you may add css rule on border with needed width and same color. It makes outline thicker.

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

div { 背景:# 999; 身高:100 px; 宽度:200 px; 边框:#999实心1px; border - radius: 10 px; 保证金:15 px; Box-shadow: 0px 0px 0px 1px #fff插入; ｝ < div > < / div >

没有必要嵌套DIVs或jQuery，尽管为了简洁起见，我省略了一些CSS的-moz和-webkit变体。你可以看到上面的结果

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

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

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

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