在CSS中,可以使用calc()函数来计算样式值。这个函数可以用于所有可以接受长度、百分比、角度、时间、频率和数字的属性。
使用calc()函数的语法如下:
property: calc(expression);
其中,expression是一个计算表达式,可以使用加、减、乘、除和括号等运算符。
下面是一些示例:
/* 计算宽度 */
width: calc(100% - 20px);
/* 计算字体大小 */
font-size: calc(16px + 2vw);
/* 计算边框半径 */
border-radius: calc(10px / 2);
/* 计算旋转角度 */
transform: rotate(calc(90deg - 10deg));
/* 使用变量进行计算 */
:root {
--width: 200px;
}
width: calc(var(--width) - 20px);
需要注意的是,calc()函数中的数学表达式必须使用空格将运算符隔开,否则可能会出现错误。另外,calc()函数不能嵌套使用。
总之,calc()函数是一个非常方便的工具,可以让我们更加灵活地控制样式值。