17370845950

设置元素圆角使用CSS的border-radius属性，可接受一个到四个值分别控制不同角，单位常用px或%，通过百分比可创建圆形或椭圆，如正方形加border-radius:50%变圆形，还可单独设置每个角如border-top-left-radius，并常用于按钮、卡片、头像等提升视觉效果。

设置元素的圆角非常简单，使用 CSS 的 border-radius 属性即可。这个属性可以让元素的四个角变得圆润，适用于图片、按钮、卡片等各种元素。

基本语法

border-radius 可以接受一个或多个长度值或百分比，表示圆角的半径大小。单位常用 px（像素）、em 或 %。

• 一个值：四个角相同
• 两个值：第一个用于左上和右下，第二个用于右上和左下
• 三个值：分别对应左上、右上/左下、右下
• 四个值：顺时针顺序为左上、右上、右下、左下

例如：

/* 四个角都是10px */
border-radius: 10px;
/ 左上和右下5px，右上和左下15px /
border-radius: 5px 15px;
/ 左上10px，右上和左下20px，右下10px /
border-radius: 10px 20px 10px;
/ 分别设置四个角 /
border-radius: 10px 20px 30px 40px;

使用百分比创建圆形或椭圆

当元素是正方形时，设置 border-radius: 50% 可以将其变成一个圆形；如果是矩形，则会变成椭圆。

/* 圆形头像示例 */
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

单独设置每个角

如果只想调整某个角，可以使用以下子属性：

• border-top-left-radius：左上角
• border-top-right-radius：右上角
• border-bottom-right-radius：右下角
• border-bottom-left-radius：左下角

例如只让左上角变圆：

border-top-left-radius: 15px;

实用技巧

实际开发中常见用法包括：

• 按钮加轻微圆角提升亲和力：border-radius: 4px;
• 卡片组件常用较大圆角：border-radius: 12px;
• 图片加圆角避免生硬边缘
• 配合 overflow: hidden，确保内容不溢出圆角区域

基本上就这些，border-radius 使用起来很直观，合理搭配能显著提升页面视觉效果。