CSS sin() 函数

定义和用法

CSS 的 sin() 函数返回一个数字（角度）的正弦值。

角度的正弦值总是返回一个介于 -1 和 1 之间的值。

实例

在 calc() 函数中使用 sin() 来设置三个 <div> 元素的宽度和高度：

div.a {
  width: calc(sin(0.25turn) * 120px);
  height: calc(sin(30deg) * 120px);
  background-color: salmon;
  margin-bottom: 25px;
}

div.b {
  width: calc(sin(90) * 120px);
  height: calc(sin(2*1.125) * 120px);
  background-color: green;
  margin-bottom: 25px;
}

div.c {
  width: calc(sin(pi/2) * 120px);
  height: calc(sin(pi/2) * 120px);
  background-color: maroon;
}

亲自试一试

CSS 语法

sin(angle)
值 描述
angle 必需。计算结果为数字或角度的表达式。

技术细节

版本： CSS4

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

Chrome Edge Firefox Safari Opera
111 111 108 15.4 97

相关页面

参考：CSS acos() 函数

参考：CSS asin() 函数

参考：CSS atan() 函数

参考：CSS atan2() 函数

参考：CSS calc() 函数

参考：CSS cos() 函数

参考：CSS exp() 函数

参考：CSS hypot() 函数

参考：CSS log() 函数

参考：CSS mod() 函数

参考：CSS pow() 函数

参考：CSS sqrt() 函数

参考：CSS tan() 函数