calc()

calc() 是一个 CSS 的函数，功能如 function 字面上的意思，在设定属性的时候可以进行四则运算，不多说直接看各种 use case。

length

background-image: url(bottomRightCorner.png);
background-position: calc(100% - 50px) calc(100% - 20px);

max-height: calc(70vh - 57px - 42px);

percentage

.column-1-7 {
   width: calc(100% / 7);
}
.column-2-7 {
   width: calc(100% / 7 * 2);
}
.column-3-7 {
   width: calc(100% / 7 * 3);
}

angle

transform: rotate(calc(0.5turn + 45deg));

time

transition: calc(1s - 120ms);

参考资料

calc()
A Couple of Use Cases for Calc()
A Complete Guide to calc() in CSS