Lea*_*yes 490
现在老问题,但这可能与有类似问题的人有关.我有一个圆形的输入字段,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;
}- IMO,这是你正在寻找的答案.我已经完成了这个方法,但不要忽视将你的轮廓变为0. (17认同)
- 这不是“轮廓”的良好替代品，因为框阴影通常隐藏在高对比度模式下。 (5认同)
- `outline: 0` 破坏了网络可访问性；阅读 http://www.outlinenone.com/ (4认同)
- 在高对比度窗口上，框阴影会被忽略，因此出于可访问性原因，不应将其用作焦点指示器。 (4认同)
- 这正是我所寻找的,并且比轮廓半径更合适. (2认同)
- 硬大纲示例不起作用。它只是一个没有圆角半径的矩形。 (2认同)
- 为什么用 pt 而不是 px？ (2认同)
- @ianstarz，当您不提供其他样式时，它将破坏可访问性。“ box-shadow”是替代样式（如此处所示，实际上在外观上与“ outline”非常相似）。 (2认同)
- @user10398534 OP 有一个**问题**，需要一个解决方案。“轮廓半径”*不存在*。这个答案试图提供最佳的可用解决方案，并且显然已经帮助了很多人。你应该努力变得有建设性。 (2认同)
mon*_*nym 77
我通常使用:after伪元素完成此操作:http: //jsfiddle.net/6QUhf/
当然这取决于用法,这种方法允许控制单个边框,而不是使用硬阴影方法.
你也可以设置-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;
}- 一个修改过的,更加壮观的版本:http://jsfiddle.net/rh6j3cdm/. (3认同)
- 无法为输入字段设置:: after伪 (2认同)
Her*_*key 31
与上面的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/看到结果
- 正确,但由于outline-radius不可用,我的方法给出了边框和轮廓的外观.这是一种视觉效果,所以除非Marc的设计指定为像素,否则它实际上不使用outline属性的事实没有区别.由于这是一个实用的解决方案,我很感激投票回来 (5认同)
- 他在谈论大纲,而不是边界......"轮廓"半径 (4认同)
- 这很棒。不过，我没有使用`inset`，而是得到了我想要的东西。 (2认同)
Mat*_*all 17
我想你正在寻找这样的东西.
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:
HTML
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;
}CSS
<div class="outer">
<div class="inner"></div>
</div>*除了使用图像
- 不,我知道如何获得边界半径如果你能得到一个大纲半径,我就会徘徊 (16认同)
- @Matt:显然是弯曲的*轮廓*而不是*边界*.见http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines (10认同)
Sta*_*ser 15
我想在Bootstrap导航栏中为下拉菜单提供一些很好的焦点可访问性,并对此非常满意:
a.dropdown-toggle:focus {
display: inline-block;
box-shadow: 0 0 0 2px #88b8ff;
border-radius: 2px;
}据我所知，Outline radius只有 Firefox 和 Firefox for android 支持。
（2021 年 7 月）
-moz-outline-radius: 1em;
小智 8
我刚刚找到了一个很好的解决方案,在查看到目前为止的所有回复后,我还没有看到它发布.所以,这就是我做的:
我为类创建了一个CSS规则,并为该规则使用了伪类:focus.我设置outline: none为摆脱Chrome默认使用的默认浅蓝色非边界半径"轮廓".然后,在那个:focus轮廓不再存在的伪类中,我添加了我的半径和边框属性.通向以下内容
outline: none;
border-radius: 5px;
border: 2px solid maroon;
有一个带有边框半径的栗色轮廓,当用户选中该元素时,该轮廓现在会出现.
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 中的当前行为：
Webkit：没有解决方案
使用outline-style: auto将告诉«用户代理渲染自定义轮廓样式»：参见 [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style(.
当您使用outline-style: auto. 很难正确地设计它。
.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>Chrome 89.0 中的当前行为：
更多信息
从 Firefox 88（将于2021 年 4 月 20 日发布）开始，轮廓将遵循边界半径的形状。
电流-moz-outline-radius将变得多余并将被移除。
请参阅MDN 的条目-moz-outline-radius：
从 Firefox 88 开始，标准的轮廓属性将遵循边界半径的形状，使 -moz-outline-radius 属性变得多余。因此，此属性将被删除。
铬94.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>- 然而，Safari 不支持轮廓的边框半径 (6认同)
我知道他的意思......
如果你想要一个浮雕外观,你可以做类似以下的事情:
他正在寻找一种在其他浏览器中使用这种方法的方法..没有我找到的解决方法,但其他人有什么东西吗？
编辑:你可以做到这一点的唯一方法是使用box-shadow,但如果你已经在该元素上有一个盒子阴影,那么这将无法工作.