CSS 数据类型 <angle> 用于表示角的大小,单位为度(degrees)、 百分度(gradians)、弧度(radians)或圈数(turns)。在 <gradient>transform 的某些方法等场景中有所应用。

语法

<angle> 数据类型由 <number> 和下列单位组成。数字与单位之间没有空格。数字为0时,单位可以省略。

<angle> 可以使用 +- 开头。正数表示顺时针的角,负数表示逆时针的角。对于静态的角,同样的角度可以使用任意等效的值表示。比如 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

示例

Angle90.png

直角:90deg = 100grad = 0.25turn ≈ 1.5708rad

Angle180.png 平角:180deg = 200grad = 0.5turn ≈ 3.1416rad
AngleMinus90.png 直角(逆时针):-90deg = -100grad = -0.25turn ≈ -1.5708rad
Angle0.png

零角:0 = 0deg = 0grad = 0turn = 0rad

规范

Specification Status Comment
CSS Values and Units Module Level 3
<angle>
Candidate Recommendation Initial definition

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 2Edge Full support 12Firefox Full support 3.6IE Full support 9Opera Full support YesSafari Full support 4WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
degChrome Full support 2Edge Full support 12Firefox Full support 3.6IE Full support 9Opera Full support YesSafari Full support 4WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
gradChrome Full support 2Edge Full support 12Firefox Full support 3.6IE Full support 9Opera Full support YesSafari Full support 4WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
radChrome Full support 2Edge Full support 12Firefox Full support 3.6IE Full support 9Opera Full support YesSafari Full support 4WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
turnChrome Full support YesEdge Full support 12Firefox Full support 13IE Full support 9Opera Full support YesSafari Full support 10WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 14Opera Android Full support YesSafari iOS Full support 10Samsung Internet Android Full support Yes

Legend

Full support  
Full support

文档标签和贡献者

此页面的贡献者: LZM, ZackBee, mozhs, zhichao
最后编辑者: LZM,