CSS Podcast - 020：函式
到目前為止，本課程介紹了幾項 CSS 函式。在 grid 模組中，我們介紹了 minmax() 和 fit-content()，協助您調整元素大小。在 color 模組中，您已介紹 rgb() 和 hsl()，可協助您定義顏色。
CSS 供應商和許多其他程式設計語言一樣內建許多內建函式，方便您隨時使用。
每個 CSS 函式都有特定用途，本課程將提供概略的總覽，讓您進一步瞭解這些函式的位置和使用方式。
什麼是函式？
函式是已命名的獨立程式碼，用於完成特定工作。已命名函式，因此您可以在程式碼中呼叫該函式，也可以將資料傳遞至函式。這就是所謂的傳送引數。
許多 CSS 函式都是「純函式」，也就是說，如果您將相同的引數傳遞至這些函式，無論程式碼中其他發生的情況為何，這些函式一律會提供相同的結果。這些函式通常會在 CSS 中的值變更時重新計算，與語言中的其他元素類似，例如經過計算的階層值 (例如 currentColor)。
在 CSS 中，您只能使用提供的函式，而不能自行撰寫，但函式在某些情境中可以相互嵌套，這樣更具彈性。本單元稍後將詳細說明。
功能選取器
.post :is(h1, h2, h3) {
line-height: 1.2;
}
您已在虛擬類別模組中瞭解功能選取器，其中包含 :is() 和 :not() 等詳細函式。傳遞至這些函式的引數是 CSS 選取器，隨後會進行評估。如果元素比對相符，就會套用其餘 CSS 規則。
自訂屬性和 var()
:root {
--base-color: #ff00ff;
}
.my-element {
background: var(--base-color);
}
自訂屬性是一個變數，可讓您將 CSS 程式碼中的值權杖化。自訂屬性也會受到串聯的影響，也就是說，這些屬性可透過情境加以操控或重新定義。自訂屬性的開頭必須是兩個破折號 (--)，並區分大小寫。
var() 函式使用一個必要引數：您正嘗試傳回做為值的自訂屬性。在上述程式碼片段中，var() 函式已做為引數傳遞 --base-color。如果已定義 --base-color，則 var() 會傳回值。
.my-element {
background: var(--base-color, hotpink);
}
您也可以將備用宣告值傳遞至 var() 函式。這表示如果找不到 --base-color，系統會改用傳遞的宣告，在這個範例中，我們使用的是 hotpink 顏色。
會傳回值的函式
var() 函式只是可傳回值的其中一個 CSS 函式。attr() 和 url() 等函式遵循與 var() 類似的結構，您可以傳遞一或多個引數，並在 CSS 宣告的右側中使用這些引數。
a::after {
content: attr(href);
}
這裡的 attr() 函式會擷取 <a> 元素 href 屬性的內容，並將其設為 ::after 虛擬元素的 content。如果 <a> 元素的 href 屬性值變更，這項變更會自動反映在此 content 屬性中。
.my-element {
background-image: url('/path/to/image.jpg');
}
url() 函式採用「字串」網址，可用於載入圖片、字型和內容。如果未傳遞有效的網址，或找不到網址指向的資源，url() 函式就不會傳回任何內容。
色彩函式
您已大致瞭解 color 模組中的色彩函式。如果你還沒閱讀過這篇文章，強烈建議你設定。
CSS 中部分可用的色彩函式包括 rgb()、rgba()、hsl()、hsla()、hwb()、lab() 和 lch()。這些方法都有類似的形式，會傳入設定引數，並傳回顏色。
數學運算式
CSS 與許多其他程式設計語言一樣，還提供實用的數學函式，協助執行各種類型的計算。
calc()
calc() 函式採用單一數學運算式做為參數。這個數學運算式可以混合使用類型，例如長度、數字、角度和頻率。單位也可以混合。
.my-element {
width: calc(100% - 2rem);
}
在本例中，使用 calc() 函式將元素寬度調整為 100% 的大小，當做包含父項元素的 100%，然後移除計算結果值的 2rem。
:root {
--root-height: 5rem;
}
.my-element {
width: calc(calc(10% + 2rem) * 2);
height: calc(var(--root-height) * 3);
}
calc() 函式可在其他 calc() 函式中嵌入。您也可以在 var() 函式中，將自訂屬性做為運算式的一部分傳遞。
min()和max()
min() 函式會傳回一或多個傳遞引數的最小值。max() 函式則相反：取得一或多個傳遞引數的最大值。
.my-element {
width: min(20vw, 30rem);
height: max(20vh, 20rem);
}
在這個範例中，寬度應為介於 20vw 之間的最小值，也就是可視區域寬度的 20% 與 30rem 之間的最小值。高度必須是介於 20vh 之間的最大值，也就是可視區域高度的 20% 至 20rem。
clamp()
clamp() 函式使用三個引數：大小下限、理想大小和最大值。
h1 {
font-size: clamp(2rem, 1rem + 3vw, 3rem);
}
在這個範例中，font-size 將依據可視區域寬度自動調整。系統會將 vw 單位新增至 rem 單位，協助縮放畫面，因為無論縮放等級為何，vw 單位的大小都相同。將 rem 單位乘以根字型大小，即可提供具有相對計算點的 clamp() 函式。
如要進一步瞭解 min()、max() 和 clamp() 函式，請參閱這篇文章。
形狀
clip-path、offset-path 和 shape-outside CSS 屬性會透過圖形裁剪方塊，或提供形狀讓內容繞過來。
兩種屬性皆可搭配使用形狀函式。circle()、ellipse() 和 inset() 等簡易形狀採用設定引數來調整大小。較複雜的形狀 (例如：polygon() 會使用以半形逗號分隔的 X 和 Y 軸值組合來建立自訂形狀)。
.circle {
clip-path: circle(50%);
}
.polygon {
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
和 polygon() 一樣，您也可以使用 path() 函式，這個函式會採用 SVG 填滿規則做為引數。這可讓您使用 Illustrator 或 Inkscape 等圖形工具中繪製的高度複雜的形狀，然後複製到 CSS。
轉換
最後在此總覽中，CSS 函式是轉換函式，可以對元素進行偏移、調整大小，甚至是變更元素深度。下列所有函式皆與 transform 屬性搭配使用。
旋轉
您可以使用 rotate() 函式旋轉元素，讓元素沿著中心軸旋轉。您也可以使用 rotateX()、rotateY() 和 rotateZ() 函式，在特定軸上旋轉元素。你可以傳遞角度、轉彎和弧度單位，以決定旋轉等級。
.my-element {
transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}
rotate3d() 函式使用四個引數。
前 3 個引數是數字，分別定義 X、Y 和 Z 座標。第四個引數是旋轉，這點與其他旋轉函式不同，接受度數、角度和轉彎。
.my-element {
transform: rotate3d(1, 1, 1, 10deg);
}
規模
您可以使用 transform 和 scale() 函式變更元素的縮放比例。這個函式接受一或兩個數字做為值，以判斷縮放比例為正數或負數。如果只定義一個數字引數，X 和 Y 軸都會縮放，且兩者定義為 X 和 Y 的簡寫。和 rotate() 一樣，您可以使用 scaleX()、scaleY() 和 scaleZ() 函式，改為針對特定軸調整元素縮放比例。
.my-element {
transform: scaleX(1.2) scaleY(1.2);
}
此外，如同 rotate 函式，我們也提供 scale3d() 函式。這與 scale() 類似，但需要使用三個引數：X、Y 和 Z 縮放比例係數。
Google 翻譯
translate() 函式會移動元素，同時維持元素在文件流程中的位置。可接受長度和百分比值做為引數。如果定義一個引數，translate() 函式就會沿著 X 軸翻譯元素；如果同時定義兩個引數，則沿著 X 軸和 Y 軸轉譯元素。
.my-element {
transform: translatex(40px) translatey(25px);
}
和其他轉換函式一樣，您可以使用 translateX、translateY 和 translateZ，針對特定軸使用特定函式。您也可以使用 translate3d，在單一函式中定義 X、Y 和 Z 平移。
傾斜
您可以使用接受角度做為引數的 skew() 函式對元素進行偏差。skew() 函式的運作方式與 translate() 非常類似。如果只定義一個引數，只會影響 X 軸，如果同時定義兩者，X 和 Y 軸會受到影響。您也可以使用 skewX 和 skewY 分別影響每個軸。
.my-element {
transform: skew(10deg);
}
行進方向朝上
最後，您可以使用 perspective 屬性 (屬於轉換系列的一部分) 來變更使用者與 Z 平面之間的距離。這樣可以營造距離的感覺，並可用來在設計中建立景深。
以 David Desandro 為例，在他們的實用文章中，此範例說明瞭如何運用，以及運用 perspective-origin-x 和 perspective-origin-y 屬性打造真正的 3D 體驗。
動畫函式、漸層與濾鏡
CSS 也提供函式，可協助您為元素建立動畫、為元素套用漸層，並使用圖形篩選器操控元素的外觀。為盡可能簡化這個模組，連結模組中已涵蓋相關內容。這些函式的結構與此模組中展示的函式類似。
隨堂測驗
測試您對函式的瞭解程度
哪些字元可識別 CSS 函式？
[]{}():::CSS 是否內建數學函式？
calc() 函式可放置在其他 calc() 中，例如 font-size: calc(10px + calc(5px * 3));
以下何者為 CSS 形狀函式？
ellipse()square()circle()rect()inset()polygon()