我通常使用:after伪元素来完成这个任务:

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

你也可以设置-1px偏移量，并使用背景线性渐变(无边框)再次获得不同的效果。

身体{ 保证金:20 px; ｝ 一个{ 背景:# 999; 填充:10px 20px; border - radius: 5 px; 文字修饰:没有; 颜色:# fff; 位置:相对; 边框:2px实心#000; ｝ {后 内容:”; 显示:块; 位置:绝对的; 上图:0; 底部:0; 左:0; 右:0; border - radius: 5 px; 边框:2px实体#ccc; ｝ < a href = " # " > < / >按钮

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

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

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

当用户通过选项卡选择元素时，有一个带有边界半径的栗色轮廓。

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

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

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

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

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

这实际上是一个可点击的圆，而边界半径仍然是一个正方形，但看起来像圆。

(2023年2月)

据我所知，只有Firefox和Firefox for android支持Outline半径。

-moz-outline-radius: 1 em;

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

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

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