We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support2123.69 Yes4
deg2123.69 Yes4
grad2123.69 Yes4
rad2123.69 Yes4
turn Yes12139 Yes10
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes4 Yes Yes Yes
deg Yes Yes Yes4 Yes Yes Yes
grad Yes Yes Yes4 Yes Yes Yes
rad Yes Yes Yes4 Yes Yes Yes
turn Yes Yes Yes14 Yes10 Yes

文档标签和贡献者

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