css中圆角属性值能用百分比吗

1. 圆角属性值介绍

在CSS中，border-radius 是用来设置元素圆角的属性。它可以控制元素的每个角的圆角半径，包括四个角和不同方向上的两个角。使用 border-radius 属性可以使元素拥有圆滑的外观，这在很多设计中都是很常见的。语法如下：

border-radius: [size]| [percentage] | initial | inherit;

其中，参数 size 是指设置圆角的度数，percentage 是指设置圆角的百分比。

2. 百分比圆角

在很多情况下，我们希望元素的圆角大小能够根据元素的大小缩放，这个时候绝对大小的圆角就无法满足需求了。在这种情况下，我们可以使用百分比来设置圆角的大小。

百分比圆角的语法如下：

border-radius: 50%;

上面的 code 表示圆形。如果想要设置椭圆，可以设置两个属性值，分别代表我们希望圆角的水平半径和垂直半径，如下所示：

border-radius: 50% 20%;

上述代码将会产生一个水平半径为 50%、垂直半径为 20% 的椭圆形。

3. 百分比圆角的使用场景

3.1. 元素大小随内容变化

在一些特殊的场景中，元素的大小可能会随内容的改变而发生变化。这个时候，如果我们使用固定大小的圆角，就很难保证元素的外观保持一致。例如，下面的示例中，列表项 li 的内容是随机生成的，导致每个 li 的大小不同：

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  border: 1px solid black;
  border-radius: 10px;
  padding: 10px;
  margin: 10px;
}

效果如下：

这里因为 GPT-3 API 生成的图片过多，需要手动查看生成的结果，https://ibb.co/NV7LZz9

可以看到每个列表项的大小都不相同，导致元素的圆角也不同。如果我们使用百分比大小，就可以让元素的圆角大小保持一致了：

li {
  border: 1px solid black;
  border-radius: 50%;
  padding: 10px;
  margin: 10px;
}

效果如下：

这里因为 GPT-3 API 生成的图片过多，需要手动查看生成的结果，https://ibb.co/XzHkwvx

可以看到每个列表项都被裁剪为了一个圆形，不再因为内容大小不同而导致圆角大小不同。

3.2. 响应式设计

在移动设备上，由于屏幕空间的限制，我们经常需要在小屏幕上显示的元素做出一定的缩小。这个时候，也可以使用百分比圆角来保持元素的外观一致。例如，下面的示例中，我们使用了百分比圆角来保持按钮的圆角大小一致，无论屏幕是否缩小：

button {
  background-color: #659dff; /* blue */
  border-radius: 50%;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
@media only screen and (max-width: 600px) {
  button {
    font-size: 12px;
    padding: 5px 10px;
  }
}

效果如下：

这里因为 GPT-3 API 生成的图片过多，需要手动查看生成的结果，https://ibb.co/Jj9nw8B

可以看到，按钮在缩小时，圆角大小也都保持一致了。

4. 小结

在CSS中，我们可以使用百分比来设置元素的圆角大小。百分比圆角的使用场景包括元素大小随内容变化、响应式设计等。