CSS3中的運算功能極大地簡化了前端開發的工作流程。在CSS2中，我們需要手動計算width、height、padding、margin等屬性值的總和，而在CSS3中，我們只需要使用一些簡單的運算表達式即可快速計算出所需的屬性值。

/* 簡單的加減乘除運算 */
width: calc(100% - 20px);
height: calc(50vh + 10px);
font-size: calc(16px * 1.2);
margin: calc(10px / 2);

以上代碼演示了加、減、乘、除四種最基本的運算方式。在使用乘法時，我們通常會把數值與一個小數進行相乘，以避免某些瀏覽器會把結果四舍五入或向上取整。

/* 使用小數進行乘法運算 */
width: calc(100% * 0.5);
height: calc(50vh * 0.8);
font-size: calc(16px * 1.2 * 0.8);

CSS3中的運算還可以結合變量使用，從而進一步提高可讀性和代碼的復用性。

/* 使用變量進行簡單的運算 */
:root {
--header-height: 50px;
}
header {
height: var(--header-height);
}
nav {
height: calc(var(--header-height) * 2);
}

除了基本的加、減、乘、除之外，CSS3中的運算還支持一些高級操作，如sin、cos、tan等三角函數，以及min、max等取最小值、最大值的函數。

/* 使用三角函數和取值函數 */
height: calc(sin(45deg) * 100px);
width: min(calc(30% + 50px), 500px);
padding: max(calc(10px - 30px), 0);

需要注意的是，CSS3中的運算表達式需要用calc()函數包裹起來才能夠生效。