CSS功能的8個巧妙技巧-css教學-PHP中文網

8 Clever Tricks with CSS Functions

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

要點

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

<ol>

純 CSS 工具提示

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

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

登入後複製

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

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

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

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

登入後複製

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

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

登入後複製

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

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

CSS 計數器

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

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

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

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

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

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

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

使用 HTML 元素作為背景圖像

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

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

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

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

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

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

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

登入後複製

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

使用 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 網站，我用佔位符替換了相關的鏈接。請自行查找並插入正確的鏈接。

以上是CSS功能的8個巧妙技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！