CSS3 函數教程 在CSS3中提供了很多實用的函數，這些函數可以讓開發者更加靈活和高效地設計和實現網頁的效果。以下是一些常用的CSS3函數介紹。 - rgb() 函數：該函數可以用來設置 RGB 顏色。其語法如下： ``` rgb(red, green, blue); ``` red, green, blue 的值范圍為 0~255，表示紅、綠、藍三個通道，可以通過改變這三個值組合出不同的顏色。例如： ``` background-color: rgb(255, 0, 0); /* 輸出紅色 */ ``` - rgba() 函數：該函數與 rgb() 類似，不同之處在于可以設置顏色的透明度（alpha通道）。其語法如下： ``` rgba(red, green, blue, alpha); ``` alpha 的值范圍為 0.0~1.0，0.0 表示完全透明，1.0 表示完全不透明。例如： ``` background-color: rgba(255, 0, 0, 0.5); /* 輸出半透明紅色 */ ``` - hsl() 函數：該函數可以用來設置 HSL 顏色。HSL 指代色相（Hue）、飽和度（Saturation）和亮度（Lightness）。其語法如下： ``` hsl(hue, saturation, lightness); ``` hue 的值范圍為 0~360，saturation 和 lightness 的值范圍為 0%~100%。例如： ``` background-color: hsl(0, 100%, 50%); /* 輸出紅色 */ ``` - hsla() 函數：該函數與 hsl() 類似，不同之處在于可以設置顏色的透明度。其語法如下： ``` hsla(hue, saturation, lightness, alpha); ``` alpha 的值范圍為 0.0~1.0。例如： ``` background-color: hsla(0, 100%, 50%, 0.5); /* 輸出半透明紅色 */ ``` - calc() 函數：該函數可以用來做簡單的計算。其語法如下： ``` width: calc(100% - 20px); ``` 該例中，元素的寬度為父元素的寬度減去 20px。 - transform() 函數：該函數可以用來對元素進行 2D 或 3D 變換。其語法如下： ``` transform: translate(x, y) rotate(angle) scale(x, y); ``` 該例中，元素對應的變換包括平移、旋轉和縮放。可以通過改變參數值來實現不同的效果。 以上是一些常用的CSS3函數，它們可以為我們的網頁設計帶來更多的創意和靈活性。如果您同時掌握了這些函數的使用方法，必將為您的前端開發之路增添色彩！