幾個好用的css函數小技巧

CSS為HTML標記語言提供了一種樣式描述，定義了其中元素的顯示方式。 CSS在Web設計領域是一個突破。利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。在這篇文章中我們將會介紹CSS函數中8種有用的小技巧。

1.純CSS Tooltip

許多網站還是在使用JavaScript來創建Tooltip效果，但實際上透過CSS能更簡單的實作。最簡單的方法就是在你的HTML程式碼中加入一個帶有提示文字的屬性，例如 data-tooltip="…" 。然後你就可以在你的CSS檔案中加入以下的程式碼透過attr() 函數來顯示提示文字：

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

相當簡單對吧？當然實際上我們還需要更多的程式碼來為提示增加樣式，但是不用擔心，已經有了為此設計的強大且純粹的叫 Hint.css 的CSS庫和 Balloon.css 。

2.使用自訂資料屬性和 attr() 函數

我們已經學會如何使用 attr() 來建立提示，另外還有一些場景能使用到這個函數。透過與資料屬性結合，你可以透過很簡單的一行HTML程式碼來建立帶有標題和描述的縮圖：

   

現在你可以透過attr() 函數來顯示標題與說明：

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

以下為具體的例子：

注意：這個方法在瀏覽器支援上可能會有一些問題，具體內容你可以查看 Accessibility support for CSS generated content 這篇文章。

3. CSS Counters

你可以透過CSS Counters來實現超棒的功能。這不是一個非常為人所知的屬性，大多數人甚至可能認為瀏覽器不能很好的支援這個屬性，但事實上所有的瀏覽器都支援這個屬性：

#但你不應該將CSS counters使用在有序列表

上，它更適合使用在類似分頁或圖片庫下面顯示的數字上。你可以透過下面的範例看出如何使用很少的程式碼（甚至不使用JavaScript）來對選取的項目進行計數：

CSS counters也非常適合顯示可透過拖放進行重新排序的項目列表上動態變化的數字：

正如最後一個例子，我們需要記住，透過該方法產生的內容在可訪問性上可能會有些問題。

4.CSS濾鏡實現的磨砂效果

在iOS7中，蘋果實現了「磨砂玻璃」的效果--半透明的，模糊的元素，看起來像覆蓋了一層磨砂玻璃。受到蘋果的啟發，這種效果被運用到很多地方。在CSS濾鏡出現之前要重現這個效果還是有些棘手的。你必須透過使用 模糊圖片 來實現這種毛玻璃的效果。但現在CSS濾鏡幾乎得到了所有的主流瀏覽器的支持，所以要 重現這個效果 就簡單很多了。

在未來，我們可以透過背景濾鏡和 filter() 函數 來達到這樣的效果，但目前只有 Safari 同時支援這兩個功能。

有關於CSS的 filter 更多的介紹可以點擊這裡進行了解。

5.將HTML元素當作背景

一般我們可以設定一個JPEG或PNG檔案當背景，或是也可以設定一個漸層的背景。但是你知道可以透過使用 element() 函數，從而將一個

設定為背景圖片嗎？現在， element() 函數只有在Firefox中得到了支援：

可能性是無止境的， 這裡 是MDN上的一個例子。

有關於CSS的 element() 函數的相關介紹可以點擊這裡。

6.透過 calc() 創造更好的網格

流體網格雖然很棒但是仍然存在很嚴重的問題。例如，在頂部和底部的間距大小幾乎不可能與在左邊和右邊的間距大小相同。另外，若使用的網格系統不一樣，標記就會非常混亂。雖然彈性佈局不是最終的解決方案，但是透過與 calc() （可以在CSS檔案中作為屬性值）結合，我們能夠創建一個更好的網格。在 這裡 ,George Martsoukos列舉了許多例子，例如擁有完美間距的畫廊網格。透過使用CSS預編譯語言，例如Sass， 組成一個創造性的網格系統 可以非常簡單且易於維護。同時瀏覽器對 calc() 的支援幾乎完美，因此 calc() 絕對是你應該掌握的功能。

有關於CSS的 calc() 函數相關的介紹可以點這裡。

7. 透過 calc() 對齊 position:fixed 元素

calc() 的另一個作用是用來對齊 position:fixed 的元素。例如，你有一個內容封裝器，它左右都有流動的間距，你希望在這個內容封裝器內精確對齊position 為fixed 的元素，但是這種情況下要計算出left 和right 屬性的具體賦值就很困難。透過calc() ,你可以結合相對和絕對的值來精確定位你的元素：

.wrapper {    max-width: 1060px;    margin: 0 auto;
}.floating-bubble {    margin: 0 auto;
}.floating-bubble {    position : fixed;    right: calc(50% - 530px); /* 50% - half your wrapper width */}

#例如：

有關於這方面的詳細介紹可以閱讀 @brnnbrn 寫的《 Aligning position:fixed Elements with CSS calc 》一文。

8.使用cubic-bezier() 實作動畫

為了讓一個網站或APP的使用者介面更具有吸引力，你可使用一些動畫，但是可以選擇的過渡效果的速度曲線是相當有限的，例如， linear 或ease-in-out 。而標準的速度曲線連彈性運動的效果都實現不了。透過使用 cubic-bezier() 函數，你可以精確地實現你想要的動畫效果。

有兩種方法使用 cubic-bezier() －了解 背後的機制 後自己創建，或是使用 cubic-bezier 產生器 。

說實話，我使用的是後者。

有關於 cubic-bezier() 詳細的介紹可以點這裡。

總結

更聰明的使用CSS函數不僅可以解決上面的問題例如創建一個更好的網格，它還可以給你更多的創作自由。隨著瀏覽器支援越來越好，你可以使用CSS函數例如 calc() 來修改和提升一下你之前的CSS程式碼。

本文根據 @Anselm Urban 的 《8 Clever Tricks with CSS Functions》 所譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或有不對之處還請同行朋友指點。如需轉載此譯文，需註明英文出處: https://www.sitepoint.com/8-clever-tricks-with-css-functions 。

以上就是8個css函數小技巧，覺得不錯的朋友們趕緊收藏起來吧。

相關推薦：

Jquery css函數實作動態操縱DOM節點的樣式

CSS3 畫出各種基本圖形小技巧

最完整的CSS開發常用技巧

####

以上是幾個好用的css函數小技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn