2023-06-06 05:00:00

轮廓半径?

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


当前回答

我想在Bootstrap导航栏中为下拉菜单提供一些不错的焦点可访问性,并且对此非常满意:

a.dropdown-toggle:专注{ 显示:inline-block; Box-shadow: 0 0 0 2px #88b8ff; border - radius: 2 px; } <a href="https://stackoverflow.com" class="dropdown-toggle">访问Stackoverflow

其他回答

通过设置outline-style: auto,我们可能很快就会看到我们的愿望

2030年见。

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

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

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

类似于上面的Lea Hayes,但我是这样做的:

div { 背景:# 999; 身高:100 px; 宽度:200 px; 边框:#999实心1px; border - radius: 10 px; 保证金:15 px; Box-shadow: 0px 0px 0px 1px #fff插入; } < div > < / div >

没有必要嵌套DIVs或jQuery,尽管为了简洁起见,我省略了一些CSS的-moz和-webkit变体。你可以看到上面的结果

我想在Bootstrap导航栏中为下拉菜单提供一些不错的焦点可访问性,并且对此非常满意:

a.dropdown-toggle:专注{ 显示:inline-block; Box-shadow: 0 0 0 2px #88b8ff; border - radius: 2 px; } <a href="https://stackoverflow.com" class="dropdown-toggle">访问Stackoverflow