<angle>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

<angle> CSS 数据类型表示以度(degrees)、百分度(gradians)、弧度(radians)或圈数(turns)表示的角度值。例如,它在 <gradient>transform 的某些函数中被使用。

尝试一下

语法

<angle> 数据类型由 <number> 后跟以下列出的单位之一组成。与所有尺寸一样,数字与单位之间没有空格。数字 0 后的单位是可选的。

此外,它前面可以加上一个 +- 号。正数表示顺时针角度,而负数表示逆时针角度。对于给定单位的静态属性,任何角度都可以用各种等价值来表示。例如,90deg 等于 -270deg1turn 等于 4turn。对于动态属性,比如应用 animationtransition 时,效果却会有所不同。

单位

deg

度(角)为单位表示角度。一个完整的圆是 360deg。例:0deg90deg14.23deg

grad

百分度为单位表示角度。一个完整的圆是 400grad。例:0grad100grad38.8grad

rad

弧度为单位表示角度。一个完整的圆是 2π 弧度,约等于 6.2832rad1rad 是 180/π 度。例:0rad1.0708rad6.2832rad

turn

以圈数为单位表示角度。一个完整的圆是 1turn。例:0turn0.25turn1.2turn

示例

设置顺时针的直角

通过从最顶部点移动到最右侧点,沿圆顺时针旋转 90 度的示意图。 90deg = 100grad = 0.25turn ≈ 1.5708rad

设置平角

通过从最顶部点移动到最底部点,沿圆顺时针旋转 180 度的示意图。 180deg = 200grad = 0.5turn ≈ 3.1416rad

设置逆时针直角

通过从最顶部点移动到最左侧点,沿圆逆时针旋转 90 度的示意图。 -90deg = -100grad = -0.25turn ≈ -1.5708rad

设置零角

显示 0 度旋转的示意图,没有转动。 0 = 0deg = 0grad = 0turn = 0rad

规范

Specification
CSS Values and Units Module Level 4
# angles

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
<angle>
deg
grad
rad
turn

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见