函式

本課程到目前為止,您已接觸過幾個 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()

瀏覽器支援

  • Chrome:26.
  • Edge:12.
  • Firefox:16.
  • Safari:7.

資料來源

calc() 函式的參數會使用單一數學運算式做為參數。 這種數學運算式可以混合使用不同型別 例如長度、數字、角度和頻率也可以混合使用。

.my-element {
    width: calc(100% - 2rem);
}

在本例中,我們使用 calc() 函式調整元素的寬度 如同所含父項元素的 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()

瀏覽器支援

  • Chrome:79.
  • Edge:79,
  • Firefox:75。
  • Safari:11.1.

資料來源

min() 函式會傳回一或多個傳遞引數的最小計算值。 max() 函式則相反:取得一或多個傳遞引數的最大值。

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

在這個例子中 寬度必須是介於 20vw 之間的最小值 :是可視區域寬度的 20%,以及 30rem。 高度應為介於 20vh 之間的最大值 :佔可視區域高度的 20%,以及 20rem

clamp()

瀏覽器支援

  • Chrome:79.
  • Edge:79,
  • Firefox:75。
  • Safari:13.1.

資料來源

clamp() 函式採用三個引數:大小下限 理想的尺寸和大小上限

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

在本例中,font-size 會根據可視區域寬度自動調整。 已將 vw 單位新增至 rem 單位,以支援縮放畫面。 因為無論縮放等級為何,vw 單位的大小都會相同。 乘以 rem 單位 (依據根字型大小): 會提供包含相對計算點的 clamp() 函式。

想進一步瞭解 min()max()clamp() 函式,請參閱: 這篇文章

形狀

clip-pathoffset-pathshape-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 填充規則做為引數。 如此一來,即可在圖形工具中繪製高度複雜的形狀 再複製到 CSS 中

轉換

最後,這個 CSS 函式總覽說明轉換函式 可傾斜、調整大小,甚至改變元素的深度。 下列所有函式都會與 transform 屬性搭配使用。

旋轉

瀏覽器支援

  • Chrome:1.
  • Edge:12.
  • Firefox:3.5。
  • Safari:3.1.

資料來源

您可以使用 rotate()敬上 函式,藉此在中心軸旋轉元素。 您也可以使用 rotateX()rotateY()rotateZ() 函式,改為在特定軸上旋轉元素。 您可以通過度數、轉動和弧度單位,決定旋轉程度。

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

rotate3d() 函式需要四個引數

瀏覽器支援

  • Chrome:12.
  • Edge:12.
  • Firefox:10.
  • Safari:4.

資料來源

前 3 個引數是定義 X、Y 和 Z 座標的數字。 第四個引數是旋轉 如同其他旋轉函式,可接受度數、角度和轉向。

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

規模

瀏覽器支援

  • Chrome:1.
  • Edge:12.
  • Firefox:3.5。
  • Safari:3.1.

資料來源

您可以使用 transformscale() 函式。 此函式接受一或兩個數字做為值,以判斷縮放比例為正數或負數。 如果您只定義一個數字引數 X 軸和 Y 軸都會縮放,同時定義兩者均為 X 和 Y 的簡寫。 和 rotate() 一樣, 提供 scaleX(), scaleY()scaleZ() 函式,改為在特定軸上縮放元素。

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

此外,與 rotate 函式一樣 scale3d() 函式。 這與 scale() 類似,但需要三個引數:X、Y 和 Z 縮放比例係數。

翻譯

瀏覽器支援

  • Chrome:1.
  • Edge:12.
  • Firefox:3.5。
  • Safari:3.1.

資料來源

translate() 函式會移動元素,同時保持元素在文件流程中的位置。 可接受長度和百分比值做為引數。 定義一個引數時,translate() 函式會沿著 X 軸轉譯元素。 如果同時定義了兩個引數,則會根據 X 軸和 Y 軸轉譯元素。

.my-element {
  transform: translatex(40px) translatey(25px);
}

您可以像使用其他轉換函式一樣,為特定軸使用特定函式, 使用 translateXtranslateYtranslateZ。 您也可以使用 translate3d敬上 這樣就能在單一函式中定義 X、Y 和 Z 轉譯。

歪斜

瀏覽器支援

  • Chrome:1.
  • Edge:12.
  • Firefox:3.5。
  • Safari:3.1.

資料來源

您可以使用 skew()敬上 函式,可接受角度做為引數。 skew() 函式的運作方式與 translate() 非常類似。 如果您只定義一個引數,只會影響 X 軸,如果同時定義兩者, X 和 Y 軸都會造成影響 您也可以使用 skewXskewY 可單獨影響每個軸。

.my-element {
  transform: skew(10deg);
}

行進方向朝上

瀏覽器支援

  • Chrome:36.
  • Edge:12.
  • Firefox:16.
  • Safari:9.

資料來源

最後,您可以使用 perspective 資源 — 變更使用者和 Z 平面之間的距離,此為轉換系列屬性的一部份。 這種感覺有距離,可以用來在設計中創造深度。

以 David Desandro 的例子來說,這是他們實用文章中的用法: 以及 perspective-origin-xperspective-origin-y 屬性,可打造真正的 3D 體驗。

動畫函式、漸層和濾鏡

CSS 也提供函式,方便您為元素建立動畫。 為這類特徵套用漸層,並使用圖形篩選器來操控這些外觀。 為了讓本單元盡可能簡潔扼要, 相關的所有單元都會詳細介紹 這些函式的結構都與本單元所述的函式類似。

隨堂測驗

測試您對函式的瞭解程度

哪些字元代表 CSS 函式?

:
::
[]
()
{}

CSS 內建數學函式嗎?

calc() 函式可放在另一個 calc() (例如 font-size: calc(10px + calc(5px * 3));) 中

以下何者為 CSS 形狀函式?

circle()
ellipse()
inset()
square()
rect()
polygon()