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

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

基本语法

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

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

例如：

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

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

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

立即学习“前端免费学习笔记（深入）”；

AI角色脑洞生成器

一键打造完整角色设定，轻松创造专属小说漫画游戏角色背景故事

107

查看详情

 /* 圆形头像示例 */ .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 使用起来很直观，合理搭配能显著提升页面视觉效果。

以上就是如何用