设置元素圆角使用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% 可以将其变成一个圆形；如果是矩形，则会变成椭圆。
立即学习“前端免费学习笔记（深入）”；
/* 圆形头像示例 */
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
}
如果只想调整某个角，可以使用以下子属性：
例如只让左上角变圆：
border-top-left-radius: 15px;
实际开发中常见用法包括：
border-radius: 4px;
border-radius: 12px;
基本上就这些，border-radius 使用起来很直观，合理搭配能显著提升页面视觉效果。
以上就是如何用css设置元素圆角border-radius的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
195
收藏
