是否有任何方法在div元素的轮廓上获得圆角,类似于border-radius?
当前回答
我觉得你在找这样的东西。
div {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid black;
background-color: #CCC;
height: 100px;
width: 160px;
}
Edit
有一个firefox专用的-moz-outline-radius,但这在IE/Chrome/Safari/Opera等浏览器上行不通。所以,看起来最跨浏览器兼容的方法*是使用包装器div:
div.inner { -webkit-border-radius: 10 px; -moz-border-radius: 10 px; border - radius: 10 px; 边框:1px纯黑色; background - color: # CCC; 身高:100 px; 宽度:160 px; } div.outer { 显示:inline-block; -webkit-border-radius: 10 px; -moz-border-radius: 10 px; border - radius: 10 px; 边框:1px纯红色; } < div class = "外" > < div class = "内部" > < / div > < / div >
*除了使用图像
其他回答
我通常使用:after伪元素来完成这个任务:
当然,这取决于使用情况,这种方法允许控制单个边界,而不是使用硬阴影方法。
你也可以设置-1px偏移量,并使用背景线性渐变(无边框)再次获得不同的效果。
身体{ 保证金:20 px; } 一个{ 背景:# 999; 填充:10px 20px; border - radius: 5 px; 文字修饰:没有; 颜色:# fff; 位置:相对; 边框:2px实心#000; } {后 内容:”; 显示:块; 位置:绝对的; 上图:0; 底部:0; 左:0; 右:0; border - radius: 5 px; 边框:2px实体#ccc; } < a href = " # " > < / >按钮
我觉得你在找这样的东西。
div {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid black;
background-color: #CCC;
height: 100px;
width: 160px;
}
Edit
有一个firefox专用的-moz-outline-radius,但这在IE/Chrome/Safari/Opera等浏览器上行不通。所以,看起来最跨浏览器兼容的方法*是使用包装器div:
div.inner { -webkit-border-radius: 10 px; -moz-border-radius: 10 px; border - radius: 10 px; 边框:1px纯黑色; background - color: # CCC; 身高:100 px; 宽度:160 px; } div.outer { 显示:inline-block; -webkit-border-radius: 10 px; -moz-border-radius: 10 px; border - radius: 10 px; 边框:1px纯红色; } < div class = "外" > < div class = "内部" > < / div > < / div >
*除了使用图像
尝试使用填充和背景色的边框,然后为轮廓边框:
.round_outline {
padding: 8px;
background-color: white;
border-radius: 50%;
border: 1px solid black;
}
对我来说很管用。
正如其他人所说,只有firefox支持这个功能。这里有一个工作,做同样的事情,甚至工作与虚线轮廓。
.has-outline { 显示:inline-block; 背景:# 51 ab9f; border - radius: 10 px; 填充:5 px; 位置:相对; } .has-outline:{后 border - radius: 10 px; 填充:5 px; 边框:2px虚线#9dd5cf; 位置:绝对的; 内容:”; 上图:2 px; 左:2 px; 底部:2 px; 右:2 px; } < div class = " has-outline”> 我能画出轮廓 < / div >
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?