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;
}

注意事项

1. 圆角不会影响元素的内容区域，只会影响边框和背景的显示
2. 当使用图片作为背景时，圆角会裁剪图片
3. 对于表格元素，需要设置 border-collapse: separate 才能使圆角生效