按钮的边框半径

Question

我有以下项目：

.first {
    padding: 12px 35px;
    border-radius: 22px;
    border: 2px solid;
    font-size: 15px
}
.second {
    padding: 12px 35px;
    border-radius: 22px;
    border: 2px solid;
    font-size: 25px
}

<button class="first">click</button>
<button class="second">click</button>

为什么第二个按钮，即使它具有相同的边界半径，角落也与第一个不同？如何将第二个按钮的边框半径设置为 22 像素，角与以前相同？

Answer 1

为什么第二个按钮即使具有相同的边框半径，角落也与第一个不同？

因为22px是固定大小。如果你仔细看，边界半径是完全一样的！只是宽度和高度不同。

我已经创建了您问题的屏幕截图。制作两层透明并将小按钮的边缘放在大按钮上，反之亦然。 看看角落是如何完全相同的

使其看起来相同的可能解决方案：第一个按钮半径是按钮22px高度的一半。

因此，要获得“相同的外观”，您可以将第二个按钮的按钮半径设置为第二个按钮28px大小的一半。

但是要小心，如果你改变了font-size或者line-height这会影响高度！

.first {
    padding: 12px 35px;
    border-radius: 22px;
    border: 2px solid;
    font-size: 15px
}
.second {
    padding: 12px 35px;
    border-radius: 28px;
    border: 2px solid;
    font-size: 25px
}

<button class="first percent">click</button>
<button class="second percent">click</button>

更新：另一个解决方案是因为您还设置了最大可能的半径，您可以设置一个比所有按钮都大的数字，例如

.first {
    padding: 12px 35px;
    border-radius: 9999px;
    border: 2px solid;
    font-size: 15px
}
.second {
    padding: 12px 35px;
    border-radius: 9999px;
    border: 2px solid;
    font-size: 25px
}

<button class="first">click</button>
<button class="second">click</button>