2023-06-06 05:00:00

轮廓半径?

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


当前回答

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

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

其他回答

如果你想要浮雕效果,你可以这样做:

.embossed { background: #e5e5e5; height: 100px; width: 200px; border: #FFFFFF solid 1px; outline: #d0d0d0 solid 1px; margin: 15px; } .border-radius { border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -khtml-border-radius: 20px; } .outline-radius { -moz-outline-radius: 21px; } <div class="embossed"></div> <div class="embossed border-radius"></div> <div class="embossed border-radius outline-radius">-MOZ ONLY</div>

我还没有找到一个工作周围有这个工作在其他浏览器。

编辑:你能做到这一点的唯一其他方法是使用盒子阴影,但如果你已经在该元素上有一个盒子阴影,这将不起作用。

结合盒子阴影和轮廓。

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

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

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

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

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

(2023年2月)

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

-moz-outline-radius: 1 em;

outline样式:auto已经拥有完全的浏览器支持很久了。

速记是:

outline: auto blue;

这让你设置自定义颜色,但不是自定义厚度,不幸的是(尽管我认为浏览器的默认厚度是一个很好的默认)。

您还可以在使用outline-style: auto时设置自定义outline-offset。

outline: auto blue;
outline-offset: 0px;