css圆角制作

使用 border-radius 属性

在 CSS 中，border-radius 是制作圆角的主要属性。可以设置一个或多个值来控制元素的圆角大小。基本语法如下：

.element {
  border-radius: 10px;
}

设置不同圆角大小

可以为元素的四个角分别设置不同的圆角半径：

.element {
  border-radius: 10px 20px 30px 40px; /* 左上 右上 右下 左下 */
}

椭圆形状圆角

通过使用斜杠（/）分隔水平半径和垂直半径，可以创建椭圆形状的圆角：

.element {
  border-radius: 50px / 25px; /* 水平半径50px，垂直半径25px */
}

单独控制每个角

CSS 提供了单独控制每个角的属性：

.element {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 40px;
}

百分比值实现圆形

当元素的宽度和高度相同时，使用50%的border-radius可以创建完美的圆形：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

响应式圆角设计

可以使用相对单位（如vw、vh）或calc()函数创建响应式圆角：

.responsive {
  border-radius: calc(1vw + 1vh);
}

圆角动画效果

通过CSS过渡或动画，可以创建圆角变化的动态效果：

.animated {
  transition: border-radius 0.3s ease;
}
.animated:hover {
  border-radius: 20px;
}

圆角边框与轮廓

注意border-radius对边框和轮廓的不同影响。边框会跟随圆角，而轮廓(outline)不会：

.with-border {
  border: 2px solid #000;
  border-radius: 10px;
  outline: 2px solid red; /* 轮廓不会变成圆角 */
}