CSS3提供了復合函數的操作，使得我們可以使用多個CSS函數來實現更加復雜的效果。下面介紹幾個常用的復合函數。

.box {
/* 同時使用多個CSS函數 */
background: linear-gradient(to right, #fc5c7d, #6a82fb);
border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

1. calc()函數

calc()函數可以進行數學計算，用于在屬性中指定長度、百分比或角度的計算值。

.box {
/* 計算寬度 */
width: calc(50% + 100px);
}

2. rgba()函數

rgba()函數可以指定顏色的RGB值和透明度值，用于實現半透明效果。

.box {
/* 帶透明度的紅色背景 */
background-color: rgba(255, 0, 0, 0.5);
}

3. transform()函數

transform()函數可以對元素進行變換，例如平移、縮放、旋轉等。

.box {
/* 平移 */
transform: translate(50px, 50px);
/* 縮放 */
transform: scale(1.5);
/* 旋轉 */
transform: rotate(45deg);
}

4. transition()函數

transition()函數可以指定CSS屬性的過渡效果，實現動態變化的效果。

.box {
/* 定義過渡效果 */
transition: width 2s, height 2s, transform 2s;
/* 鼠標懸停時修改屬性值 */
&:hover {
width: 200px;
height: 200px;
transform: rotate(180deg);
}
}

總結

通過復合函數的使用，可以更加靈活地實現CSS效果。我們可以使用calc()函數進行計算，rgba()函數實現半透明效果，transform()函數進行元素變換，transition()函數定義屬性過渡效果。希望本文能對大家的學習有所幫助。