border-radius:50%和border-radius:100%有什么区别？

在前端开发中，border-radius属性用于设置元素边框的圆角。当你设置border-radius为百分比值时，这个百分比是相对于元素自身的宽度和高度的。

1. border-radius: 50%;：

   • 当元素的宽度和高度相等时（即正方形），设置为50%会使得元素变成一个完整的圆形。
   • 如果元素的宽度和高度不相等（即矩形），设置为50%会使得元素在宽度和高度方向上各自形成半个椭圆，从而整体呈现为椭圆形。

2. border-radius: 100%;：

   • 无论元素的宽度和高度是否相等，设置为100%都会使得元素在四个角上各自形成一个完整的圆形或椭圆形。但实际上，对于大多数情况，当元素是正方形时，它和50%的效果是一样的，都是形成一个完整的圆形。当元素是矩形时，虽然四个角都会形成完整的圆形，但中间部分可能仍然是直线，因此整体形状可能看起来比较奇特，不像50%那样形成一个规则的椭圆形。

总的来说，对于想要创建圆形或椭圆形元素的场景，border-radius: 50%;通常是最常用的选择。而border-radius: 100%;在某些特定场景下可能有用，但更多时候可能会导致不期望的视觉效果。

另外，值得注意的是，如果元素的宽度或高度非常小，以至于圆角半径超过了元素的一半尺寸，那么浏览器可能会调整圆角半径以确保渲染效果的一致性。这可能会导致实际渲染的圆角半径小于你设置的值。