是否有任何方法在div元素的轮廓上获得圆角,类似于border-radius?
当前回答
我刚刚找到了一个很好的解决方案,在看了所有的回复后,我还没有看到它发布。所以,这就是我所做的:
我为类创建了一个CSS规则,并为该规则使用了一个伪类:focus。我设置outline: none来去掉Chrome默认使用的浅蓝色无边框半径的“outline”。然后,在同样的:focus伪类中,轮廓不再存在,我添加了半径和边界属性。导致以下结果
outline: none;
border-radius: 5px;
border: 2px solid maroon;
当用户通过选项卡选择元素时,有一个带有边界半径的栗色轮廓。
其他回答
我喜欢这样。
.circle:before {
content: "";
width: 14px;
height: 14px;
border: 3px solid #fff;
background-color: #ced4da;
border-radius: 7px;
display: inline-block;
margin-bottom: -2px;
margin-right: 7px;
box-shadow: 0px 0px 0px 1px #ced4da;
}
它会创建一个灰色的圆,周围有边框,边框也是1px !
类似于上面的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变体。你可以看到上面的结果
通过设置outline-style: auto,我们可能很快就会看到我们的愿望
2030年见。
Firefox 88+: border-radius
从2021年4月起,你就可以在Firefox上使用简单的CSS了:
.actual { 轮廓:实红色; border - radius: 10 px; } .expected { 边框:实红色; border - radius: 10 px; } 在Firefox 88+中, <span class="actual">this outline</span> 应该是这样的 <span class="expected">this border</span>
Firefox 86.0的当前行为:
Webkit:没有解决方案
使用outline-style: auto将告诉«用户代理渲染自定义outline样式»:参见[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style(。
当您使用outline-style: auto时,基于webkit的浏览器将在边界上绘制轮廓。很难正确地设计它的风格。
.actual { 大纲:自动红色; border - radius: 10 px; } .expected { 边框:实红色; border - radius: 10 px; } 在WebKit浏览器(Chrome, Edge)中, <span class="actual">this outline</span> 应该看得很近 <span class="expected">this border</span>
Chrome 89.0的当前行为:
更多的信息
从Firefox 88(将于2021年4月20日发布)开始,outline将遵循边界半径的形状。 当前的-moz-outline-radius将变得多余并将被删除。
参见MDN关于-moz-outline-radius的条目:
从Firefox 88开始,标准的outline属性将遵循border-radius的形状,使-moz-outline-radius属性变得多余。因此,此属性将被删除。
我有一个圆形边框的输入字段,想要改变焦点轮廓的颜色。我无法控制输入控件中可怕的方形轮廓。
所以我用了盒影。实际上我更喜欢阴影的平滑外观,但阴影可以被硬化以模拟圆形轮廓:
输入,输入:焦点{ 边界:没有; border - radius: 2分; Box-shadow: 0 0 0 1pt灰色; 大纲:没有; 过渡:1。; } /*平滑的轮廓与盒子阴影:*/ .text1:专注{ 箱影:0 0 3pt 2pt矢车菊蓝; } /*硬“轮廓”与盒子阴影:*/ .text2:专注{ 箱影:0 0 0 2pt红色; } <输入class = " text1 " > < br > < br > <input type=text class="text2">
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?