是否有任何方法在div元素的轮廓上获得圆角,类似于border-radius?
当前回答
结合盒子阴影和轮廓。
李·海耶斯的回答有点小变化 我发现
input[type=text]:focus {
box-shadow: 0 0 0 1pt red;
outline-width: 1px;
outline-color: red;
}
最后的效果非常干净。没有使用边界半径时的大小跳跃
其他回答
我想在Bootstrap导航栏中为下拉菜单提供一些不错的焦点可访问性,并且对此非常满意:
a.dropdown-toggle:专注{ 显示:inline-block; Box-shadow: 0 0 0 2px #88b8ff; border - radius: 2 px; } <a href="https://stackoverflow.com" class="dropdown-toggle">访问Stackoverflow
通过设置outline-style: auto,我们可能很快就会看到我们的愿望
2030年见。
你可以用盒子阴影代替这样的轮廓
box-shadow: 0 0 1px #000000;
border-radius: 50px;
outline: none;
用这个吧: Box-shadow: 0px 0px 1px红色;
我刚刚找到了一个很好的解决方案,在看了所有的回复后,我还没有看到它发布。所以,这就是我所做的:
我为类创建了一个CSS规则,并为该规则使用了一个伪类:focus。我设置outline: none来去掉Chrome默认使用的浅蓝色无边框半径的“outline”。然后,在同样的:focus伪类中,轮廓不再存在,我添加了半径和边界属性。导致以下结果
outline: none;
border-radius: 5px;
border: 2px solid maroon;
当用户通过选项卡选择元素时,有一个带有边界半径的栗色轮廓。
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?