是否有任何方法在div元素的轮廓上获得圆角,类似于border-radius?
当前回答
我刚刚找到了一个很好的解决方案,在看了所有的回复后,我还没有看到它发布。所以,这就是我所做的:
我为类创建了一个CSS规则,并为该规则使用了一个伪类:focus。我设置outline: none来去掉Chrome默认使用的浅蓝色无边框半径的“outline”。然后,在同样的:focus伪类中,轮廓不再存在,我添加了半径和边界属性。导致以下结果
outline: none;
border-radius: 5px;
border: 2px solid maroon;
当用户通过选项卡选择元素时,有一个带有边界半径的栗色轮廓。
其他回答
There is the solution if you need only outline without border. It's not mine. I got if from Bootstrap css file. If you specify outline: 1px auto certain_color, you'll get thin outer line around div of certain color. In this case the specified width has no matter, even if you specify 10 px width, anyway it will be thin line. The key word in mentioned rule is "auto". If you need outline with rounded corners and certain width, you may add css rule on border with needed width and same color. It makes outline thicker.
通过设置outline-style: auto,我们可能很快就会看到我们的愿望
2030年见。
我刚刚找到了一个很好的解决方案,在看了所有的回复后,我还没有看到它发布。所以,这就是我所做的:
我为类创建了一个CSS规则,并为该规则使用了一个伪类:focus。我设置outline: none来去掉Chrome默认使用的浅蓝色无边框半径的“outline”。然后,在同样的:focus伪类中,轮廓不再存在,我添加了半径和边界属性。导致以下结果
outline: none;
border-radius: 5px;
border: 2px solid maroon;
当用户通过选项卡选择元素时,有一个带有边界半径的栗色轮廓。
尝试使用填充和背景色的边框,然后为轮廓边框:
.round_outline {
padding: 8px;
background-color: white;
border-radius: 50%;
border: 1px solid black;
}
对我来说很管用。
类似于上面的Lea Hayes,但我是这样做的:
div { 背景:# 999; 身高:100 px; 宽度:200 px; 边框:#999实心1px; border - radius: 10 px; 保证金:15 px; Box-shadow: 0px 0px 0px 1px #fff插入; } < div > < / div >
没有必要嵌套DIVs或jQuery,尽管为了简洁起见,我省略了一些CSS的-moz和-webkit变体。你可以看到上面的结果
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?