CSS功能的8個巧妙技巧

CSS 的強大功能遠超許多網頁開發者想像。隨著時間的推移，樣式表語言的功能越來越強大，為瀏覽器帶來了原本需要 JavaScript 才能實現的功能。本文將介紹八個巧妙的 CSS 函數技巧，這些技巧完全無需 JavaScript。

要點

• CSS 函數可用於創建各種效果和功能，例如工具提示、縮略圖標題、計數器和磨砂玻璃效果，而無需 JavaScript。
• calc() 函數可用於創建更智能的網格系統和固定位置元素的對齊，從而在設計中提供更大的靈活性和精度。
• CSS 函數還允許使用 cubic-bezier() 函數進行創意動畫，以及使用 element() 函數將 HTML 元素用作背景圖像的潛力，儘管後者目前僅受 Firefox 支持。

1. 純 CSS 工具提示

   許多網站仍然使用 JavaScript 創建工具提示，但實際上使用 CSS 更容易。最簡單的解決方案是在 HTML 代碼中使用數據屬性提供工具提示文本，例如 data-tooltip="…"。有了這個標記，您可以將以下內容放入 CSS 中，以在 attr() 函數內顯示工具提示文本：

   .tooltip::after {
     content: attr(data-tooltip);
   }

   非常簡單明了，對吧？當然，還需要更多代碼來實際設置工具提示的樣式，但不用擔心，有一個很棒的純 CSS 庫，專門用於此目的，名為 Hint.css。

2. (濫用)自定義數據屬性和 attr() 函數

   我們已經將 attr() 用於工具提示，但它還有其他一些用例。結合數據屬性，您可以僅使用一行 HTML 代碼構建帶有標題和說明的縮略圖圖像：

   <a class="caption" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" data-title="秃鹫" data-description="...">
     <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174011191897662.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="8 Clever Tricks with CSS Functions " />
   </a>

   現在，您可以使用 attr() 函數顯示標題和說明：

   .caption::after {
     content: attr(data-title);
     ...
   }

   這是一個帶有懸停顯示動畫標題的縮略圖的工作示例：[CodePen 示例鏈接](假設此處應插入 CodePen 鏈接)

   注意：生成的內容在無障礙方面可能存在問題。關於 CSS 生成內容的輔助功能支持的這篇文章對此主題進行了有用的解讀。

3. CSS 計數器

   您可以使用 CSS 計數器，這似乎像是魔法。它不是最廣為人知的特性，大多數人可能認為它支持得不是很好，但實際上，每個瀏覽器都支持CSS 計數器：[Can I Use css-counters?](假設此處應插入Can I Use鏈接)

   雖然您不應將 CSS 計數器用於有序列表（<ol></ol>），但計數器非常適合分頁或在圖庫中項目下方顯示數字。您還可以計算選中項目的數量，考慮到您需要的代碼很少（並且沒有 JavaScript），這非常令人印象深刻：[CodePen 示例鏈接](假設此處應插入 CodePen 鏈接)。

   CSS 計數器也非常適合動態更改項目列表中的數字，這些數字可以通過拖放重新排序：[CodePen 示例鏈接](假設此處應插入 CodePen 鏈接)。

   與最後一個示例一樣，請記住——生成的內容在無障礙方面可能存在問題。

4. 使用 CSS 過濾器實現磨砂玻璃效果

   隨著 iOS 7 的發布，Apple 為我們帶來了“磨砂玻璃”效果——半透明、模糊的元素，看起來像磨砂玻璃窗。受 Apple 實現的啟發，這種效果開始出現在許多地方。在有 CSS 過濾器之前，重現這種效果有點棘手，您必須使用模糊圖像來創建磨砂玻璃效果。現在，幾乎所有主要瀏覽器都完全支持 CSS 過濾器，因此重現這種效果就容易得多。 [Can I Use css-filters?](假設此處應插入 Can I Use 鏈接)

   將來，我們可以使用 backdrop-filter 和 filter() 函數創建類似的效果，但這兩個函數目前僅受 Safari 支持。

5. 使用 HTML 元素作為背景圖像

   通常，您會指定 JPEG 或 PNG 文件作為背景圖像，或者可能是漸變。但您是否知道，使用 element() 函數，您還可以使用 <div> 作為背景圖像？目前，<code>element() 函數僅受 Firefox 支持：[Can I Use css-element-function?](假設此處應插入 Can I Use 鏈接)

   可能性幾乎是無限的，這裡有一個來自 MDN 的示例。

6. 使用 calc() 創建更智能的網格

   流體網格是一件很棒的事情，但存在一些嚴重的問題。例如，不可能讓頂部和底部的間距與左側和右側的間距大小相同。此外，標記非常混亂，具體取決於您使用的網格系統。即使是 flexbox 本身也不是最終解決方案，但使用 calc() 函數（可以用作 CSS 中的值），網格可以變得更好。在本網站上的本教程中，George Martsoukos 展示了一些實際示例，例如具有完美間距的圖庫網格。使用 Sass 等 CSS 預處理器，構建有創意的網格系統可以非常簡單易於維護。由於瀏覽器的支持也幾乎完美，因此 calc() 是您絕對應該使用的便捷功能。 [Can I Use calc?](假設此處應插入 Can I Use 鏈接)

7. 使用 CSS calc() 對齊 position:fixed 元素

   calc() 函數的另一個用例是對齊具有固定位置的元素。例如，如果您有一個具有流體間距的左側和右側的內容包裝器，並且您想精確地對齊該包裝器內的固定元素——您將很難確定為“right”或“left”屬性選擇哪個值。使用 calc()，您可以組合相對值和絕對值以完美地對齊元素：

   .tooltip::after {
     content: attr(data-tooltip);
   }

   這是一個示例：[CodePen 示例鏈接](假設此處應插入 CodePen 鏈接)

8. 使用 cubic-bezier() 進行動畫

   為了使網站或應用程序的 UI 更具吸引力，您可以使用動畫，但標準的緩動選項非常有限。例如，“linear”或“ease-in-out”。像彈跳動畫這樣的東西，甚至使用標準選項也不可能實現。使用 cubic-bezier() 函數，您可以按照自己的意願精確地設置元素動畫。

   有兩種方法可以使用 cubic-bezier()——理解其背後的數學原理並自己構建它，或者使用 cubic-bezier 生成器。

   老實說，我會選擇後者。

結論

巧妙地使用 CSS 函數不僅可以解決已知問題（例如建立更智能的網格系統），還可以為您提供更大的創造自由。隨著瀏覽器支持越來越好，您應該認真查看您的 CSS 並使用 calc() 等函數對其進行改進。

關於 CSS 函數的常見問題

作為初學者，我應該了解哪些基本的 CSS 函數？

CSS 函數用於設置 CSS 屬性的值。每個初學者都應該了解的一些基本函數包括 rgb()、rgba()、hsl()、hsla() 和 calc()。 rgb() 和 rgba() 函數用於定義顏色，而 hsl() 和 hsla() 函數用於根據色相、飽和度和亮度定義顏色。 calc() 函數允許您執行計算以確定 CSS 屬性值。

如何在 CSS 中使用 calc() 函數？

CSS 中的 calc() 函數用於執行可以用作屬性值的計算。此函數可以使用“ ”（加法），“-”（減法），“*”（乘法）和“/”（除法）數學運算符。例如，您可以使用 calc() 創建一個始終為視口寬度 50% 減去 20 像素的 div，如下所示：div { width: calc(50% – 20px); }。

CSS 中 rgb() 和 rgba() 函數有什麼區別？

CSS 中 rgb() 和 rgba() 函數的主要區別在於，rgba() 包含一個 alpha 通道，該通道指定顏色的不透明度。 alpha 參數是一個介於 0.0（完全透明）和 1.0（完全不透明）之間的數字。例如，要設置半透明紅色，您可以使用：color: rgba(255, 0, 0, 0.5);。

如何使用 CSS 函數創建漸變？

可以使用 CSS 函數使用 linear-gradient() 和 radial-gradient() 函數創建漸變。例如，要創建一個從紅色到藍色的線性漸變，您可以使用：background: linear-gradient(red, blue);。類似地，要創建一個從中心紅色的徑向漸變到邊緣的藍色，您可以使用：background: radial-gradient(red, blue);。

我可以使用 CSS 函數轉換元素嗎？

是的，CSS 函數可用於轉換元素。 transform 屬性可與各種函數（如 rotate()、scale()、skew() 和 translate()）一起使用，以修改元素的外觀。例如，要將元素旋轉 45 度，您可以使用：transform: rotate(45deg);。

CSS 中 attr() 函數的用途是什麼？

CSS 中的 attr() 函數用於返回所選元素的屬性值。這對於生成內容等很有用。例如，您可以使用 attr() 在工具提示中顯示鏈接的“href”屬性的值：a:after { content: attr(href); }。

如何在 CSS 中使用 var() 函數？

CSS 中的 var() 函數用於插入自定義屬性（也稱為“CSS 變量”）的值。例如，您可以定義一個自定義屬性 --main-color: blue;，然後在 CSS 中使用它，如下所示：color: var(--main-color);。

我可以使用 CSS 函數創建動畫嗎？

是的，CSS 函數可用於創建動畫。 CSS 中的 animation 屬性是八個不同屬性的簡寫屬性，包括 animation-name、animation-duration、animation-timing-function 等。例如，要創建一個名為“slidein”的 2 秒動畫，您可以使用：animation: slidein 2s;。

url() 函數在 CSS 中的用途是什麼？

CSS 中的 url() 函數用於包含文件。 url() 函數最常見的用途是鏈接到外部樣式表或包含圖像。例如，要設置元素的背景圖像，您可以使用：background-image: url('image.jpg');。

我可以使用 CSS 函數創建 3D 變換嗎？

是的，CSS 函數可用於創建 3D 變換。 CSS 中的 transform 屬性可與 rotateX()、rotateY()、rotateZ()、scale3d() 和 translate3d() 等函數一起使用以創建 3D 變換。例如，要圍繞 X 軸旋轉元素，您可以使用：transform: rotateX(45deg);。

請注意，我已盡力對原文進行偽原創，並保留了圖片的原始格式和位置。 由於無法訪問 CodePen 和 Can I Use 網站，我用佔位符替換了相關的鏈接。請自行查找並插入正確的鏈接。