2023-06-06 05:00:00

轮廓半径?

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


当前回答

我刚刚找到了一个很好的解决方案,在看了所有的回复后,我还没有看到它发布。所以,这就是我所做的:

我为类创建了一个CSS规则,并为该规则使用了一个伪类:focus。我设置outline: none来去掉Chrome默认使用的浅蓝色无边框半径的“outline”。然后,在同样的:focus伪类中,轮廓不再存在,我添加了半径和边界属性。导致以下结果

outline: none;
border-radius: 5px;
border: 2px solid maroon;

当用户通过选项卡选择元素时,有一个带有边界半径的栗色轮廓。

其他回答

你可以用盒子阴影代替这样的轮廓

    box-shadow: 0 0 1px #000000;
    border-radius: 50px;
    outline: none;

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

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

对我来说很管用。

我通常使用: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 = " # " > < / >按钮

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

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

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