按钮的边框半径

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>

为什么第二个按钮即使具有相同的边框半径，其角也与第一个不同？如何将第二个按钮的边框半径设置为22px，并具有与上一个相同的角？

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>

Answer 2

使用百分比border-radius: 40%;而不是px中的固定值。百分比将相对于按钮的大小起作用。

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

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

Answer 3

您在按钮中使用了不同的字体大小，这就是按钮边框半径看起来不同的原因。您可以在两个按钮css中使用border-radius : 60px;解决此问题，如果要设置相同的高度，则可以使用{{1} }。

min-height

    .first {
    padding: 12px 35px;
    border: 2px solid;
    font-size: 15px;

    border-radius: 60px;
    min-width: 150px;
    min-height: 60px;
}
.second {
    padding: 12px 35px;
    border: 2px solid;
    font-size: 25px;
    border-radius: 60px;
    min-width: 150px;
    min-height: 60px;
}
.three {
    padding: 12px 35px;
    border: 2px solid;
    font-size: 15px;

    border-radius: 60px;
}