Html 轮廓半径？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5394116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Outline radius?
提问by Marc Guerin
Is there anyway of getting rounded cornerson the outlineof a div element, similar to border-radius?
反正是有得到的圆角的轮廓的div element，类似border-radius？
回答by Lea Hayes
Old question now, but this might be relevant for somebody with a similar issue. I had an input field with rounded borderand wanted to change colour of focus outline. I couldn't tame the horrid square outlineto the input control.
现在是老问题，但这可能与有类似问题的人有关。我有一个圆形的输入字段，border想改变焦点轮廓的颜色。我无法将可怕的方块驯服outline到输入控件中。
So instead, I used box-shadow. I actually preferred the smooth look of the shadow, but the shadow can be hardened to simulate a rounded outline:
所以相反，我使用了 box-shadow。我实际上更喜欢阴影的平滑外观，但可以强化阴影以模拟圆形轮廓：
/* Smooth outline with box-shadow: */
.text1:focus {
box-shadow: 0 0 3pt 2pt red;
}
/* Hard "outline" with box-shadow: */
.text2:focus {
box-shadow: 0 0 0 2pt red;
}<input type=text class="text1">
<br>
<br>
<br>
<br>
<input type=text class="text2">回答by mononym
I usually accomplish this using the :after pseudo-element:
我通常使用 :after 伪元素完成此操作：
of course it depends on usage, this method allows control over individual borders, rather than using the hard shadow method.
当然这取决于用法，这种方法允许控制单个边界，而不是使用硬阴影方法。
you could also set -1px offsets and use a background linear gradient (no border) for a different effect once again.
您还可以设置 -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>回答by Heraldmonkey
Similar to Lea Hayes above, but here's how I did it:
类似于上面的 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
不需要嵌套 DIV 或 jQuery，但为了简洁起见，我省略了某些 CSS 的 -moz 和 -webkit 变体。你可以看到上面的结果
回答by StackOverflowUser
I wanted some nice focus accessibility for dropdown menus in a Bootstrap navbar, and was pretty happy with this:
我想要在 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>回答by Matt Ball
You're looking for something like this, I think.
你正在寻找这样的东西，我想。
div {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid black;
background-color: #CCC;
height: 100px;
width: 160px;
}
Edit
编辑
There is a Firefox-only -moz-outline-radiusproperly, but that won't work on IE/Chrome/Safari/Opera/etc. So, it looks like the most cross-browser-compatible way*to get a curved line around a border is to use a wrapper div:
有一个 Firefox-only-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>*aside from using images
*除了使用图像
回答by Branden Pinney
I just found a great solution for this, and after looking at all the responses so far, I haven't seen it posted yet. So, here's what I did:
我刚刚为此找到了一个很好的解决方案，在查看了迄今为止的所有回复后，我还没有看到它发布。所以，这就是我所做的：
I created a CSS Rule for the class and used a pseudo-class of :focus for that rule. I set outline: noneto get rid of that default light-blue non-border-radius-able 'outline' that Chrome uses by default. Then, in that same :focuspseudo-class, where that outline no longer exists, I added my radius and border properties. Leading to the following
我为该类创建了一个 CSS 规则，并为该规则使用了一个伪类 :focus 。我设置outline: none摆脱 Chrome 默认使用的默认浅蓝色无边框半径“轮廓”。然后，在该:focus轮廓不再存在的同一个伪类中，我添加了半径和边框属性。导致以下
outline: none;
border-radius: 5px;
border: 2px solid maroon;
to have a maroon-colored outline with a border radius that now appears when the element is tab-selected by the user.
当用户通过选项卡选择元素时，现在会出现一个带有边框半径的栗色轮廓。
回答by James Kyle
If you want to get an embossed look you could do something like the following:
如果您想获得浮雕效果，您可以执行以下操作：
.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>I have not found a work around to have this work in other browsers.
我还没有找到在其他浏览器中进行这项工作的解决方法。
EDIT:The only other way you can do this is to use box-shadow, but then this wont work if you already have a box shadow on that element.
编辑：您可以执行此操作的唯一其他方法是使用 box-shadow，但是如果您已经在该元素上有一个框阴影，则这将不起作用。
回答by Hyman Black
We may see our wishes soonish by setting outline-style: autoIt's on WebKits radar: http://trac.webkit.org/changeset/198062/webkit
我们可以通过设置outline-style: auto它在 WebKits 雷达上很快看到我们的愿望：http://trac.webkit.org/changeset/198062/webkit
See ya in 2030.
2030 年见。
回答by Aleks Sid
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.
如果您只需要没有边框的轮廓，就有解决方案。不是我的。我从 Bootstrap css 文件中得到了 if。如果您指定outline: 1px auto certain_color，您将在特定颜色的 div 周围获得细外线。在这种情况下指定的宽度没有关系，即使您指定10 px的宽度，无论如何它都会是细线。上述规则中的关键词是“自动”。
如果您需要带有圆角和一定宽度的轮廓，您可以在具有所需宽度和相同颜色的边框上添加 css 规则。它使轮廓更粗。
回答by RobKohr
As others have said, only firefox supports this. Here is a work around that does the same thing, and even works with dashed outlines.
正如其他人所说，只有 Firefox 支持这一点。这是一个做同样事情的解决方法，甚至可以使用虚线轮廓。
.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>