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

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>

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

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

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

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

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

类似于上面的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变体。你可以看到上面的结果

我通常使用: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 = " # " > < / >按钮

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的什么属性使它在边界上是可取的?

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.

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

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

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

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

我把轮廓设置为透明。

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

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

我想在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

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

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

对我来说很管用。

结合盒子阴影和轮廓。

李·海耶斯的回答有点小变化 我发现

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

最后的效果非常干净。没有使用边界半径时的大小跳跃

我喜欢这样。

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

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

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

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

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

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

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

通过设置outline-style: auto，我们可能很快就会看到我们的愿望

2030年见。

正如其他人所说，只有firefox支持这个功能。这里有一个工作，做同样的事情，甚至工作与虚线轮廓。

.has-outline { 显示:inline-block; 背景:# 51 ab9f; border - radius: 10 px; 填充:5 px; 位置:相对; ｝ .has-outline:{后 border - radius: 10 px; 填充:5 px; 边框:2px虚线#9dd5cf; 位置:绝对的; 内容:”; 上图:2 px; 左:2 px; 底部:2 px; 右:2 px; ｝ < div class = " has-outline”> 我能画出轮廓 < / div >

(2023年2月)

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

-moz-outline-radius: 1 em;

用这个吧: Box-shadow: 0px 0px 1px红色;

Firefox 88+: border-radius

从2021年4月起，你就可以在Firefox上使用简单的CSS了:

.actual { 轮廓:实红色; border - radius: 10 px; ｝ .expected { 边框:实红色; border - radius: 10 px; ｝ 在Firefox 88+中， <span class="actual">this outline</span> 应该是这样的 <span class="expected">this border</span>

Firefox 86.0的当前行为:

Webkit:没有解决方案

使用outline-style: auto将告诉«用户代理渲染自定义outline样式»:参见[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style(。

当您使用outline-style: auto时，基于webkit的浏览器将在边界上绘制轮廓。很难正确地设计它的风格。

.actual { 大纲:自动红色; border - radius: 10 px; ｝ .expected { 边框:实红色; border - radius: 10 px; ｝ 在WebKit浏览器(Chrome, Edge)中， <span class="actual">this outline</span> 应该看得很近 <span class="expected">this border</span>

Chrome 89.0的当前行为:

更多的信息

从Firefox 88(将于2021年4月20日发布)开始，outline将遵循边界半径的形状。 当前的-moz-outline-radius将变得多余并将被删除。

参见MDN关于-moz-outline-radius的条目:

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

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

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>

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

速记是:

outline: auto blue;

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

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

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

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

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