是否有任何方法在div元素的轮廓上获得圆角,类似于border-radius?
当前回答
你可以用盒子阴影代替这样的轮廓
box-shadow: 0 0 1px #000000;
border-radius: 50px;
outline: none;
其他回答
outline样式:auto已经拥有完全的浏览器支持很久了。
速记是:
outline: auto blue;
这让你设置自定义颜色,但不是自定义厚度,不幸的是(尽管我认为浏览器的默认厚度是一个很好的默认)。
您还可以在使用outline-style: auto时设置自定义outline-offset。
outline: auto blue;
outline-offset: 0px;
通过设置outline-style: auto,我们可能很快就会看到我们的愿望
2030年见。
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.
你可以用盒子阴影代替这样的轮廓
box-shadow: 0 0 1px #000000;
border-radius: 50px;
outline: none;
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属性变得多余。因此,此属性将被删除。
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?