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

a.dropdown-toggle:专注{ 显示:inline-block; Box-shadow: 0 0 0 2px #88b8ff; border - radius: 2 px; ｝ <a href="https://stackoverflow.com" class="dropdown-toggle">访问Stackoverflow

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

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

outline样式:auto已经拥有完全的浏览器支持很久了。

速记是:

outline: auto blue;

这让你设置自定义颜色，但不是自定义厚度，不幸的是(尽管我认为浏览器的默认厚度是一个很好的默认)。

您还可以在使用outline-style: auto时设置自定义outline-offset。

outline: auto blue;
outline-offset: 0px;

我觉得你在找这样的东西。

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

Edit

有一个firefox专用的-moz-outline-radius，但这在IE/Chrome/Safari/Opera等浏览器上行不通。所以，看起来最跨浏览器兼容的方法*是使用包装器div:

div.inner { -webkit-border-radius: 10 px; -moz-border-radius: 10 px; border - radius: 10 px; 边框:1px纯黑色; background - color: # CCC; 身高:100 px; 宽度:160 px; ｝ div.outer { 显示:inline-block; -webkit-border-radius: 10 px; -moz-border-radius: 10 px; border - radius: 10 px; 边框:1px纯红色; ｝ < div class = "外" > < div class = "内部" > < / div > < / div >

*除了使用图像

如果你想要浮雕效果，你可以这样做:

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

我还没有找到一个工作周围有这个工作在其他浏览器。

编辑:你能做到这一点的唯一其他方法是使用盒子阴影，但如果你已经在该元素上有一个盒子阴影，这将不起作用。

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

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

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

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