轮廓半径？

有没有办法在div元素的轮廓上获得圆角，类似于border-radius？

530653 次浏览
小开

你在找像这样的东西，我想。

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

编辑

有一个只有Firefox的-moz-outline-radius正确，但这在IE/Chrome/Safari上不起作用 /Opera/etc.所以，看起来最跨浏览器兼容的方式*在边框周围获得曲线是使用包装器div：

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


div.outer {
display: inline-block;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid red;
}
<div class="outer">
<div class="inner"></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>

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

编辑：你可以做到这一点的唯一方法是使用box阴影，但如果你已经在该元素上有一个box阴影，这将不起作用。

小开

现在是老问题了，但这可能与有类似问题的人相关。我有一个带有圆形border的输入字段，并想更改焦点轮廓的颜色。我无法将可怕的方形轮廓驯服到输入控件中。

因此，我使用了box-shadow。我实际上更喜欢阴影的平滑外观，但阴影可以硬化以模拟圆形轮廓：

input, input:focus {
border: none;
border-radius: 2pt;
box-shadow: 0 0 0 1pt grey;
outline: none;
transition: .1s;
}
/* Smooth outline with box-shadow: */
.text1:focus {
box-shadow: 0 0 3pt 2pt cornflowerblue;
}


/* Hard "outline" with box-shadow: */
.text2:focus {
box-shadow: 0 0 0 2pt red;
}
<input class="text1">
<br>
<br>
<input type=text class="text2">

小开

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

div {
background: #999;
height: 100px;
width: 200px;
border: #999 solid 1px;
border-radius: 10px;
margin: 15px;
box-shadow: 0px 0px 0px 1px #fff inset;
}
<div></div>

No nesting of DIVs or jQuery necessary, Altho for brevity I have left out the -moz and -webkit variants of some of the CSS. You can see the result above

小开

我通常使用：后伪元素来完成此操作：

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

您还可以设置-1px偏移量并再次使用背景线性渐变（无边框）以获得不同的效果。

body {
margin: 20px;
}


a {
background: #999;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
color: #fff;
position: relative;
border: 2px solid #000;
}


a:after {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 5px;
border: 2px solid #ccc;
}
<a href="#">Button</a>

小开

不会。边框位于元素的外部和box模型边距区域的内部。轮廓位于元素的内部，box模型填充区域会忽略它。它不是为了美观。它只是向设计者显示元素的轮廓。例如，在开发html文档的早期阶段，开发人员可能需要快速确定他们是否将所有骨架div放在正确的位置。稍后，他们可能需要检查各种按钮和表单的像素间隔是否正确。

边框本质上是美学的。与轮廓不同，它们实际上是盒子模型的一部分，这意味着它们不会重叠设置为边距： 0的文本；边框的每一侧都可以单独设置样式。

如果你想用一个角半径来勾勒轮廓，我想你用的是大多数人使用边框的方式。所以如果你不介意我问，轮廓的什么属性使它在边框上更可取？

小开

如果您只需要没有边框的轮廓，有解决方案。这不是我的。我从Bootstrap css文件中得到了if。如果您指定outline: 1px auto certain_color，您将在某些颜色的div周围获得较薄的外层线。在这种情况下，指定的宽度无关紧要，即使您指定10像素的宽度，无论如何它都将是细线。提到的规则中的关键词是“自动”。
如果您需要圆角和一定宽度的轮廓，您可以在所需宽度和相同颜色的边框上添加css规则。它使轮廓更厚。

小开

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

我为该类创建了一个CSS规则，并为该规则使用了一个伪类：焦点。我设置outline: none以摆脱Chrome默认使用的默认浅蓝色非边框半径可'轮廓'。然后，在同一个: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:focus {
display: inline-block;
box-shadow: 0 0 0 2px #88b8ff;
border-radius: 2px;
}
<a href="https://stackoverflow.com" class="dropdown-toggle">Visit Stackoverflow</a>

小开

尝试使用填充和背景颜色作为边框，然后使用边框作为轮廓：

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

在我的案子中工作。

小开

组合框阴影和轮廓。

对Lea Hayes答案的轻微扭曲 我发现

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);

这实际上会使可点击的只有圆形，而border-半径仍然是一个正方形，但看起来像圆形。

小开

唯一的跨浏览器选项是创建一个实现您想要的hack.当涉及到样式预先存在的内容时，这种方法确实带来了某些潜在的问题，但它提供了比许多其他解决方案更多的轮廓自定义（偏移量，宽度，线条样式）。

在基本级别上，考虑以下静态示例（运行演示片段）：

.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很快看到我们的愿望它在WebKits雷达上：http://trac.webkit.org/changeset/198062/webkit

2030年再见。

小开

正如其他人所说，只有火狐支持这一点。这是一个做同样的事情的工作，甚至可以使用虚线轮廓。

例子

.has-outline {
display: inline-block;
background: #51ab9f;
border-radius: 10px;
padding: 5px;
position: relative;
}
.has-outline:after {
border-radius: 10px;
padding: 5px;
border: 2px dashed #9dd5cf;
position: absolute;
content: '';
top: -2px;
left: -2px;
bottom: -2px;
right: -2px;
}
<div class="has-outline">
I can haz outline
</div>

小开

（2022年6月）
据我所知，Outline radius仅支持Firefox和Firefox for android。

-moz-轮廓半径：1em；

输入图片描述

小开

使用这个： box-shadow: 0px 0px 0px 1px red;

小开

Firefox 88+：边框半径

从2021年4月起，您将能够在Firefox上使用简单的CSS：

.actual {
outline: solid red;
border-radius: 10px;
}


.expected {
border: solid red;
border-radius: 10px;
}
In Firefox 88+,
<span class="actual">this outline</span>
should look like
<span class="expected">this border</span>

Firefox 86.0中的当前行为：
Firefox 86.0中此CSS的视觉效果

Webkit：没有解决方案

使用outline-style: auto将告诉“用户代理呈现自定义大纲样式”：请参阅[MDN]（https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style（.

当您使用outline-style: auto时，基于Webkit的浏览器将在边框上绘制轮廓。很难正确设置样式。

.actual {
outline: auto red;
border-radius: 10px;
}


.expected {
border: solid red;
border-radius: 10px;
}
In WebKit browsers (Chrome, Edge),
<span class="actual">this outline</span>
should look close to
<span class="expected">this border</span>

Chrome89.0中的当前行为：
这个CSS在Chrome89.0中的视觉效果

更多信息

从Firefox 88（即将发布2021年4月20日）开始，轮廓将遵循边框半径的形状。
当前的-moz-outline-radius将变得多余并将被删除。

见MDN关于-moz-outline-radius的条目：

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

小开

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

小开

Chrome94.0+

我在chrome 94.0中测试了它，现在似乎轮廓属性尊重边框半径。

在此处输入图片描述

.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-style: auto已经完全支持浏览器很久了。

速记是：

outline: auto blue;

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

您还可以在使用outline-style: auto时设置自定义大纲偏移量。

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

您可以使用box阴影而不是像这样的轮廓

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

提交答案