CSS 值 | 角度

CSS 值中的角度类型用于定义旋转、倾斜以及其他图形变换的角度。在 CSS 中，有多种不同的角度单位可供选择。

角度单位

在 CSS 中，有以下几种常见的角度单位：

• 度数（deg）：以度数为单位的角度，可以是正数、负数或零。一个完整的圆是360度。
• 弧度（rad）：以弧度为单位的角度，通过将圆弧的长度定义为圆的半径的倍数来计算。一个完整的圆是2π弧度，约等于6.28318。
• 梯度（grad）：以梯度为单位的角度，一个完整的圆是400梯度。
• 百分比（%）：以百分比为单位的角度，相对于一个完整的圆。一个完整的圆相当于 100%。

应用示例

1. 旋转元素

可以使用角度单位来旋转元素。例如，使用 transform 属性的 rotate 函数：

.rotate {
  transform: rotate(45deg);
}

• 这将使元素顺时针旋转45°。

2. 绘制圆形

可以使用角度单位来绘制圆形。例如，设置 border-radius 属性值为50%：

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

• 这将使元素呈现一个圆形形状。

3. 倾斜元素

可以使用角度单位来倾斜元素。例如，使用 transform 属性的 skew 函数：

.skew {
  transform: skew(30deg);
}

• 这将使元素水平倾斜30°。

4. 渐变角度

可以使用角度单位来设置渐变的方向。例如，使用 linear-gradient 函数：

.gradient {
  background: linear-gradient(45deg, red, blue);
}

• 这将创建一个从红色到蓝色的线性渐变，斜角为45°。

结论

在 CSS 中，角度单位用于定义旋转、倾斜、渐变等图形变换的角度。掌握这些角度单位可以帮助开发人员创建出更具创意和动态效果的界面。无论是旋转元素、绘制圆形还是倾斜元素，角度单位都是不可或缺的工具。

参考链接：MDN - CSS 角度单位