轮廓半径?

有没有在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; } 

我知道他的意思

如果你想得到一个浮雕的外观,你可以做如下的事情:

http://jsfiddle.net/xxCT8/

他正在寻找一种方法来在其他浏览器中进行这项工作..没有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; }