CSS 边框半径的百分比（%）和像素（px）或 em

在本文中，我们将介绍在 CSS 中如何使用百分比和像素（或 em）来设置边框的圆角半径。

阅读更多：CSS 教程

百分比（%）的边框半径

CSS 中的 border-radius 属性可以通过百分比来设置边框的圆角半径。百分比是相对于边框框线尺寸的一个比例，具体的数值表示相对于边框框线尺寸的百分比。

例如，如果一个元素的边框框线尺寸为 10px，而边框的圆角半径为 50%，那么圆角的半径就是 10px 的一半，即 5px。

下面是一个示例代码：

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  border-radius: 50%;
}

上述代码中的 <div> 元素将会显示一个圆形，因为边框的圆角半径是边框框线尺寸的50%。

像素（px）或 em 的边框半径

除了百分比，我们也可以使用像素（px）或 em 作为边框的圆角半径的单位。

使用像素作为单位时，直接指定具体的像素值即可。例如：

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  border-radius: 10px;
}

上述代码中的 <div> 元素的边框圆角半径为 10px。

使用 em 作为单位时，需要注意 em 是相对于元素的字体大小而言的。例如：

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  font-size: 20px;
  border-radius: 0.5em;
}

上述代码中的 <div> 元素的边框圆角半径为 10px，因为 0.5em 相当于 20px 的 0.5 倍。

混合使用百分比和像素（px）或 em

除了单独使用百分比或像素（px）或 em，我们还可以将它们混合使用，以实现更复杂的效果。

例如，如果我们希望一个元素的上部分有一个较大的圆角，而下部分有一个较小的圆角，可以使用百分比和像素（px）或 em 的组合。

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  border-top-left-radius: 50% 20px;
  border-bottom-right-radius: 10% 5px;
}

上述代码中的 <div> 元素的左上角圆角半径为边框框线尺寸的50%和20px，右下角圆角半径为边框框线尺寸的10%和5px。

这样的混合使用可以让我们更灵活地控制元素的边框圆角效果。

总结

CSS 中的 border-radius 属性可以通过百分比、像素或 em 来设置边框的圆角半径。百分比是相对于边框框线尺寸的一个比例，而像素和 em 则是具体的数值。我们可以单独使用百分比、像素或 em，也可以将它们混合使用，以实现更复杂的效果。通过合理的使用，我们可以为元素的边框添加圆角，从而使元素的外观更加美观。