轮廓半径？
有没有在div element的轮廓上获得圆angular ，类似于border-radius ？
老问题现在，但这可能与有类似问题的人有关。 我有一个带有圆angularborder的inputborder ，想要改变焦点轮廓的颜色。 我无法驯服可怕的方形outlineinput控件。
所以相反，我用盒子阴影。 我其实更喜欢阴影的光滑外观，但阴影可以被硬化来模拟一个圆形的轮廓：
/* Smooth outline with box-shadow: */ input[type=text]:focus { box-shadow: 0 0 3pt 2pt red; } /* Hard "outline" with box-shadow: */ input[type=text]:focus { box-shadow: 0 0 0 2pt red; }
我通常使用：after伪元素完成此操作： http : //jsfiddle.net/6QUhf/
当然这取决于使用情况，这种方法允许控制单个边界，而不是使用硬阴影方法。
您也可以设置-1px的偏移量，并使用背景线性渐变（无边框）再次获得不同的效果。
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 ; }
与上面的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或jQuery的必要嵌套，为简洁起见，我忽略了一些CSS的-moz和-webkit变体。 你可以在http://jsfiddle.net/Zq8XU/看到结果;
我想，你正在寻找这样的东西 。
div { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 1px solid black; background-color: #CCC; height: 100px; width: 160px; }
编辑
IE浏览器/ Chrome浏览器/ Safari浏览器/ Opera /等不能正常工作。 所以，它看起来像跨浏览器兼容的方式*获得围绕边界的曲线是使用包装div：
HTML
<div class="outer"><div class="inner"></div></div>
CSS
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; }
演示2
*除了使用图像
我想在Bootstrap导航栏中为下拉菜单提供一些很好的焦点可访问性，并且对此非常满意：
a.dropdown-toggle:focus { display: inline-block; box-shadow: 0 0 0 2px #88b8ff; border-radius: 2px; }
我知道他的意思
如果你想得到一个浮雕的外观，你可以做如下的事情：
他正在寻找一种方法来在其他浏览器中进行这项工作..没有find解决办法，但其他人有什么？
编辑：唯一的另一种方式，你可以做到这一点是使用盒阴影，但是这将无法正常工作，如果你已经有一个盒子上的阴影的元素。
我刚刚find了一个很好的解决scheme，在查看了所有的答案之后，我还没有看到它的发布。 所以，这就是我所做的：
我为这个类创build了一个CSS规则，并为这个规则使用了一个伪类：focus。 我设置了“outline：none”来摆脱Chrome默认使用的默认浅蓝色非边框半径轮廓。 然后，在同样的：焦点伪类，那个轮廓不再存在的地方，我添加了“border-radius：5px”和“border：2px solid maroon”来创build一个带有边框半径的栗色轮廓。该元素由用户select。
如果你只需要没有边框的轮廓就有解决scheme。 不是我的。 我得到如果从Bootstrap的CSS文件。 如果你指定了outline: 1px auto certain_color ，那么你会在某个颜色的div周围得到细的外线。 在这种情况下，即使指定了10 px的宽度，指定的宽度也没有问题，反正它是细线。 上述规则中的关键词是“auto”。
如果你需要带有圆angular和一定宽度的轮廓，你可以在需要的宽度和相同颜色的边框上添加css规则。 它使轮廓更粗。
没有边界坐在元素的外侧和箱型边缘区域的内侧。 大纲坐在元素的内部，并且框模型填充区域忽略它。 这不是为了美观。 这只是向devise师展示元素的轮廓。 例如，在开发html文档的早期阶段，开发人员可能需要快速辨别是否已将所有的骨架div放在正确的位置。 稍后，他们可能需要检查各种button和forms是否是相互正确的像素数量。
边界在本质上是美学的。 与大纲不同，它们实际上是盒子模型的一部分，这意味着它们不会将文本设置为margin：0; 而边框的每一面都可以单独devise。
如果您尝试将轮廓半径应用于轮廓，则假定您正在使用大多数人使用边框的方式。 所以，如果你不介意我问，轮廓的什么属性使边界更可取？
尝试使用填充和边框的背景色，然后使用大纲的边框：
.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; }
