使用 % 的边界半径圆 - CSS

在 CSS 中，我们可以使用 border-radius 属性来创建圆角效果。其中，边界半径的值可以是一个具体的像素值，也可以是一个百分比，表示相对于元素边界框的百分比大小。

当我们使用百分比值时，可以将圆形的大小与元素的宽高比保持一致，从而创建更加灵活的设计效果。下面展示一个简单的 CSS 代码片段，使用 50% 的边界半径值创建一个圆形元素：

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

这里的 width 和 height 属性都设置为 200px，border-radius 值为 50%，表示将元素的四个角半径设置为元素的宽高的一半，从而创建一个圆形元素。例如，以下 HTML 代码将创建一个圆形的 div 元素：

<div class="circle"></div>

可以参考 CodePen 查看效果。

更进一步，我们可以使用不同的百分比值在 x 轴和 y 轴方向上分别设置边界半径，从而创建椭圆形状的元素。这时，需要将 border-radius 值分别指定为 <水平半径> / <垂直半径> 的形式，例如：

.ellipse {
  width: 200px;
  height: 100px;
  border-radius: 50% / 25%;
}

这里的 width 和 height 属性分别设置为 200px 和 100px，border-radius 值为 50% / 25%，表示将水平和垂直方向上的圆角半径比例分别设置为 2：1，从而创建一个椭圆形状的元素。例如，以下 HTML 代码将创建一个椭圆形状的 div 元素：

<div class="ellipse"></div>

可以参考 CodePen 查看效果。

值得注意的是，像素值和百分比值都可以与 border-radius 属性的前缀 -moz-、-webkit-、-ms- 和 -o- 一起使用，以适应不同的浏览器兼容性。同时，可以使用 border-top-left-radius、border-top-right-radius、border-bottom-left-radius 和 border-bottom-right-radius 分别指定元素的四个角的边界半径，以实现更加精细的设计效果。

以上就是关于使用 % 的边界半径圆的简单介绍，更多细节和特性需要自行探究和实践。