border-radius是CSS3属性，用于设置元素圆角边框，通过px或%定义半径，可创建圆形头像、圆角按钮和卡片布局，现代浏览器广泛支持，提升界面美观性。
在HTML5中设置圆角边框，主要通过CSS的 border-radius 属性来实现。虽然这个属性不属于HTML5标签本身，但结合HTML5结构和现代CSS3技术，可以轻松为元素添加圆角效果。
什么是 border-radius 属性？
border-radius 是CSS3引入的一个属性，用于定义元素边框的圆角程度。它可以应用于任何块级或内联元素，比如 div、img、button 等。
基本语法和用法
border-radius 可以接受一个或多个长度值（px、em、% 等），表示圆角的半径大小。
- 设置四个角相同半径：
border-radius: 10px; - 分别设置四个角（顺时针：左上、右上、右下、左下）：
border-radius: 10px 5px 10px 5px; - 设置水平和垂直半径（创建椭圆角）：
border-radius: 20px / 10px;
常见应用场景
实际开发中，border-radius 常用于美化界面元素：
立即学习“前端免费学习笔记（深入）”；
-
圆形头像：给图片设置
border-radius: 50%可变成圆形。
示例：img { width: 100px; height: 100px; border-radius: 50%; } -
圆角按钮：
button { padding: 10px 20px; border-radius: 8px; } -
卡片式布局：为 div 容器添加轻微圆角，提升视觉体验。
.card { border-radius: 12px; border: 1px solid #ddd; }
兼容性与注意事项
现代浏览器都支持 border-radius 属性，包括 Chrome、Firefox、Safari、Edge 和 IE9+。如果需要兼容老版本IE，可考虑使用图片或JavaScript方案，但在大多数项目中已无需担心。
建议使用 px 或 % 单位，避免使用负值（无效）。同时注意不要设置过大的圆角值，以免影响布局或视觉效果。
基本上就这些，掌握 border-radius 能显著提升页面美观度，使用简单且效果直观。不复杂但容易忽略细节，合理运用即可。
