为什么'border-radius”会产生不同的形状（百分比与像素/em）？

边框半径（以像素 (%) 和像素 (px) 或 Em

为什么边框半径采取不同的百分比和像素？

边框半径允许您将网页元素的角变圆。但是，当使用百分比或像素时，角的形状会发生变化。

百分比值

根据 CSS 背景和边框模块级别 3，百分比指的是边框对应的尺寸。例如，如果设置 border-radius: 50%;，则 X 轴上的半径为容器宽度的 50%，Y 轴上的半径为容器高度的 50%。这会产生椭圆形。

像素和其他单位值

使用单个像素值或其他单位（例如 em、in）作为边框 - radius 总是产生一个椭圆，或者换句话说，一个圆。

但是，当曲线重叠时，应用一条规则将半径减小到最小边尺寸的一半。例如，如果设置 border-radius: 999px;在 230px x 100px 的元素上，半径将减小到 50px，即元素高度的一半。

示例

考虑以下内容代码片段：

.percent {
  border-radius: 50%;
}
.pixels {
  border-radius: 115px/50px;
}

/* For the demo : */
div {
  display: inline-block;
  background: teal;
  width: 230px;
  height: 100px;
  padding: 40px 10px;
  box-sizing: border-box;
  font-family: courier;
  font-size: 0.8em;
  color: #fff;
  text-align: center;
}

带有边框半径： 50%；，角将呈椭圆形。使用 border-radius: 115px/50px; 时，角将具有相同的椭圆形状，因为对于 230px x 100px 的元素，115px/50px 相当于两侧各 50%。

以上是为什么'border-radius”会产生不同的形状（百分比与像素/em）？的详细内容。更多信息请关注PHP中文网其他相关文章！