css圆角制作
CSS 圆角制作方法
在 CSS 中，可以通过 border-radius 属性轻松实现圆角效果。该属性支持多种语法形式，适用于不同场景的需求。
基本语法
border-radius 可以接受 1-4 个值，分别对应不同方向的圆角半径：
/* 所有角相同 */
border-radius: 10px;
/* 左上和右下 | 右上和左下 */
border-radius: 10px 20px;
/* 左上 | 右上和左下 | 右下 */
border-radius: 10px 20px 30px;
/* 左上 | 右上 | 右下 | 左下 */
border-radius: 10px 20px 30px 40px;椭圆角
可以通过斜杠（/）分隔水平半径和垂直半径，创建椭圆角：
/* 水平半径 | 垂直半径 */
border-radius: 10px / 20px;
/* 每个角单独设置 */
border-radius: 10px 20px 30px 40px / 15px 25px 35px 45px;单独控制每个角
CSS 还提供了分别控制每个角的属性：
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;百分比值
使用百分比值时，圆角半径相对于元素自身的宽度和高度计算：
border-radius: 50%; /* 创建圆形 */高级应用
对于复杂形状，可以结合 CSS 变量和动画：
:root {
--radius: 5px;
}
.element {
border-radius: var(--radius);
transition: border-radius 0.3s ease;
}
.element:hover {
--radius: 15px;
}浏览器兼容性
border-radius 属性在现代浏览器中有很好的支持。对于需要兼容旧版浏览器的情况，可以添加厂商前缀：
.element {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}注意事项
- 圆角不会影响元素的内容区域，只会影响边框和背景的显示
- 当使用图片作为背景时，圆角会裁剪图片
- 对于表格元素，需要设置
border-collapse: separate才能使圆角生效
