CSS 边框半径不会影响内部元素

在本文中，我们将介绍CSS中的边框半径(border-radius)属性及其对内部元素的影响问题。边框半径属性用于定义一个元素的圆角。然而，我们会发现，边框半径属性并不会影响到元素内部的子元素。

阅读更多：CSS 教程

什么是边框半径？

在CSS中，边框半径(border-radius)属性用于定义一个元素的圆角。这个属性可以接受一个或多个值，每个值表示一个角的圆角半径。我们可以使用像素(px)、百分比(%)或em等单位来指定这个值。

例如，以下CSS代码将一个矩形元素的四个角都设置成半径为10px的圆角：

div {
  border-radius: 10px;
}

边框半径对内部元素的影响

尽管边框半径属性可以定义一个元素的圆角，但是它并不会影响该元素内部的子元素。换句话说，当我们给一个元素设置了边框半径，它的内部元素依然保持直角。

看下面的例子，我们有一个有边框的div元素，并在其中包含了一个p元素。我们给div元素设置了边框半径为10px，但是p元素的边角依然是直角：

<div class="container">
  <p class="text">Hello World!</p>
</div>

.container {
  border: 2px solid black;
  border-radius: 10px;
}

.text {
  padding: 10px;
  background-color: lightgrey;
}

尽管div元素显示了有边框的圆角外观，但是p元素的边角依然是直角。如下图所示：

+-------------------------+
|                         |
| <div>                   |
|   +-----------------+   |
|   | <p>Hello World!</p> |
|   +-----------------+   |
|                         |
+-------------------------+

这种行为是因为边框半径属性仅应用于元素本身而非其内部的子元素。要使内部元素也具有圆角，我们需要在内部元素上单独设置边框半径。

解决办法：为内部元素设置边框半径

要使内部元素也具有圆角，我们可以在内部元素上单独设置边框半径。以下是修改后的代码示例：

<div class="container">
  <p class="text">Hello World!</p>
</div>

.container {
  border: 2px solid black;
  border-radius: 10px;
}

.text {
  padding: 10px;
  background-color: lightgrey;
  border-radius: 10px; /* 为内部元素设置边框半径 */
}

通过为p元素添加边框半径属性，我们可以使内部元素具有圆角，与其外部元素保持一致。如下图所示：

+-----------------------------+
|                             |
| <div>                       |
|   +---------------------+   |
|   | <p>Hello World!</p>   | |
|   |                     | |
|   +---------------------+   |
|                             |
+-----------------------------+