CSS sqrt() 函数

定义和用法

CSS 的 sqrt() 函数返回数的平方根。

实例

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

div.a {
  width: calc(50px * sqrt(16)); /* 200px */
  height: calc(50px * sqrt(9)); /* 150px */
  background-color: salmon;
  margin-bottom: 25px;
}

div.b {
  width: calc(20px * sqrt(16)); /* 80px */
  height: calc(20px * sqrt(9)); /* 60px */
  background-color: green;
  margin-bottom: 25px;
}

div.c {
  width: calc(60px * sqrt(16)); /* 240px */
  height: calc(60px * sqrt(9)); /* 180px */
  background-color: maroon;
}

亲自试一试

CSS 语法

sqrt(x)
描述
x 必需。大于或等于 0 的数。

技术细节

版本: CSS4

浏览器支持

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

Chrome Edge Firefox Safari Opera
120 120 118 15.4 106

相关页面

参考:CSS acos() 函数

参考:CSS asin() 函数

参考:CSS atan() 函数

参考:CSS atan2() 函数

参考:CSS calc() 函数

参考:CSS cos() 函数

参考:CSS exp() 函数

参考:CSS hypot() 函数

参考:CSS log() 函数

参考:CSS mod() 函数

参考:CSS sin() 函数

参考:CSS tan() 函数