2023-06-06 05:00:00

轮廓半径?

是否有任何方法在div元素的轮廓上获得圆角,类似于border-radius?


当前回答

clip-path: circle(100px at center);

这实际上是一个可点击的圆,而边界半径仍然是一个正方形,但看起来像圆。

其他回答

尝试使用填充和背景色的边框,然后为轮廓边框:

.round_outline {
  padding: 8px;
  background-color: white;
  border-radius: 50%;
  border: 1px solid black;
}

对我来说很管用。

结合盒子阴影和轮廓。

李·海耶斯的回答有点小变化 我发现

input[type=text]:focus {
    box-shadow: 0 0 0 1pt red;
    outline-width: 1px;
    outline-color: red;
}

最后的效果非常干净。没有使用边界半径时的大小跳跃

(2023年2月)

据我所知,只有Firefox和Firefox for android支持Outline半径。

-moz-outline-radius: 1 em;

用这个吧: Box-shadow: 0px 0px 1px红色;

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属性变得多余。因此,此属性将被删除。