无论如何在div element的轮廓上得到圆角，类似于border-radius？
现在老问题，但这可能与有类似问题的人有关。我有一个圆形border的输入字段，并希望改变焦点轮廓的颜色。我无法将可怕的方形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">我找到了Lea Hayes回答的轻微转折
input[type=text]:focus {
box-shadow: 0 0 0 1pt red;
outline-width: 1px;
outline-color: red;
}
得到一个非常好的干净完成。使用border-radius时没有跳跃的大小
尝试使用填充和边框的背景颜色，然后使用边框的边框：
.round_outline {
padding: 8px;
background-color: white;
border-radius: 50%;
border: 1px solid black;
}
在我的案例中工作。
我只是设置大纲透明。
input[type=text] {
outline: rgba(0, 0, 0, 0);
border-radius: 10px;
}
input[type=text]:focus {
border-color: #0079ff;
}
我喜欢这样。
.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-radius仍然是一个正方形，但看起来像圆圈。
我通常使用：after伪元素完成此操作：
当然这取决于用法，这种方法允许控制单个边框，而不是使用硬阴影方法。
您还可以设置-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>与上面的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>不需要嵌套DIV或jQuery，为简洁起见，我遗漏了一些CSS的-moz和-webkit变体。你可以看到上面的结果
我想你正在寻找something like this。
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 /等。因此，看起来最接近浏览器兼容的方式*在边框周围获得一条曲线就是使用包装器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>*除了使用图像
我想在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>我刚刚找到了一个很好的解决方案，在查看到目前为止的所有回复后，我还没有看到它发布。所以，这就是我做的：
我为类创建了一个CSS规则，并为该规则使用了一个伪类：focus。我设置outline: none以摆脱Chrome默认使用的默认浅蓝色非边界半径“轮廓”。然后，在同样的:focus伪类中，该轮廓不再存在，我添加了我的半径和边界属性。通向以下内容
outline: none;
border-radius: 5px;
border: 2px solid maroon;
有一个带有边框半径的栗色轮廓，当用户选中该元素时，该轮廓现在会出现。
我知道他的意思......
如果你想要一个浮雕外观，你可以做类似以下的事情：
他正在寻找一种在其他浏览器中使用这种方法的方法..没有我找到的解决方法，但其他人有什么东西吗？
编辑：你可以做到这一点的唯一方法是使用box-shadow，但如果你已经在该元素上有一个盒子阴影，那么这将无法工作。
不是。边框位于元素的外侧和框模型边缘区域的内侧。轮廓位于元素的内部，框模型填充区域忽略它。它不是为了美学。这只是向设计师展示元素的轮廓。例如，在开发html文档的早期阶段，开发人员可能需要快速辨别出是否已将所有骨架div放在正确的位置。稍后他们可能需要检查各种按钮和表格是否是彼此分开的正确像素数。
边界本质上是美学的。与轮廓不同，它们实际上是盒子模型的一部分，这意味着它们不会与设置为边距的文本重叠：0;边框的每一面都可以单独设计。
如果您正在尝试将角半径应用于轮廓，我假设您正在使用它，就像大多数人使用边框一样。所以，如果你不介意我问，轮廓的哪些属性使它更适合边界？
如果您只需要没有边框的轮廓，则有解决方案。不是我的。我从Bootstrap css文件得到了。如果指定outline: 1px auto certain_color，您将获得特定颜色div周围的细外线。在这种情况下，指定的宽度无关紧要，即使您指定10 px宽度，无论如何它都是细线。提到的规则中的关键词是“自动”。
如果您需要具有圆角和特定宽度的轮廓，则可以在边框上添加具有所需宽度和相同颜色的css规则。它使轮廓更厚。