CSS3 圆角详解
编程小白也能懂的CSS圆角知识汇总 – 从基础到实战
什么是CSS圆角？
以前网页上的方框都是直角的，CSS3圆角属性（border-radius）可以轻松创建圆角效果，让元素看起来更柔和、更现代。
想象一下手机应用图标那种圆润的边角，用CSS只需要一行代码就能实现。
小贴士
圆角属性不会改变元素大小或位置，只是改变了元素的边角形状。
基本语法
圆角属性叫 border-radius，后面可以跟1-4个值：
1个值（四个角相同）
border-radius: 20px; /* 所有角都是20px圆角 */
四个相同圆角
2个值（对角相同）
border-radius: 20px 40px; /* 左上/右下 20px | 右上/左下 40px */
对角相同圆角
3个值（左上、右上左下、右下）
border-radius: 20px 40px 60px; /* 左上20px | 右上/左下40px | 右下60px */
三个值圆角
4个值（每个角单独设置）
border-radius: 10px 20px 30px 40px; /* 左上10px | 右上20px | 右下30px | 左下40px */
四个不同圆角
椭圆圆角（高级用法）
圆角并不仅限于圆形，你可以创建椭圆形状的圆角：
水平半径和垂直半径
border-radius: 50px / 30px; /* 水平半径50px，垂直半径30px */
椭圆形状圆角
单独设置每个角的椭圆效果
border-radius: 30px 10px 50px 20px / 20px 40px 10px 30px;
/* 更复杂的椭圆圆角组合 */
复杂椭圆圆角
单独设置每个角
CSS允许你单独设置每个角的圆角半径：
左上角
border-top-left-radius: 40px;
左上角圆角
右上角
border-top-right-radius: 40px;
右上角圆角
右下角
border-bottom-right-radius: 40px;
右下角圆角
左下角
border-bottom-left-radius: 40px;
左下角圆角
圆形和胶囊形状
利用圆角可以轻松创建圆形和胶囊形状：
圆形
border-radius: 50%; /* 元素需要是正方形 */
圆形
胶囊形状
border-radius: 9999px; /* 或使用50%，但矩形用9999px更安全 */
胶囊形状按钮
重要注意事项
- 圆角效果会裁剪内容，超出圆角部分的内容会被隐藏
- 百分比值基于元素的尺寸计算，适合创建自适应圆角
- 圆角是视觉效果，不会改变元素在文档流中的位置
- 圆角可以应用于任何元素：div、图片、按钮、表单等
- 可与边框、阴影等属性组合使用创造更丰富的效果
最佳实践
使用相对单位（rem或em）而不是固定像素值，这样在不同设备上看起来更和谐。
浏览器支持
border-radius在现代浏览器中有很好的支持：
Chrome 5+
Firefox 4+
Safari 5+
Edge 12+
Opera 10.5+