1. 純 CSS 的 tooltips
很多網站仍在用 JavaScript 創建 tooltips，但實際上，用 CSS 實現更加簡單。最簡單的方法是在 HTML 代碼的 data 屬性中提供 tooltip 文本，比如：data-tooltip="…"。這樣就可以在 CSS 中添加以下代碼來在 attr() 函數中顯示 tooltip 文本了：
.tooltip::after {
content: attr(data-tooltip);
}很好懂，對吧？當然要想設計 tooltips 還需要更多的代碼，但是不必擔心，有一款很棒的純 CSS 庫就是爲此而生的，叫做 Hint.css 。
2. 使用自定義data 屬性和 attr() 函數
我們已經在 tooltips 中用過 attr() 了，但是還有一些情況也可以用 attr()。結合 data 屬性，可以通過 title 和 description 僅用一行 HTML 代碼創建縮略圖：
接下來就可以用 attr() 函數來顯示 title 和 description 了：
.caption::after {
content: attr(data-title);
...
}這裡提供一個 hover 上去有字幕動畫效果的縮略圖例子：傳送門
說明：CSS 生成的 content 是 不易獲取 的。在此方面，這篇文章的 關於獲取 CSS 生成 content 的内容（網頁鏈接） 部分可以借鋻。
3. CSS 計數器
CSS 計數器可以做出神奇的效果。計數器不是最有名的特點，多數人可能認爲它的支持性不夠好，但實際上，所有瀏覽器都支持 CSS 計數器：
計數器用於分頁或是在 gallery 下方展示項目數量都很棒，但是不應該用在有序列表（
）上。也可以用 CSS 計數器計算已選項的數量，代碼量會令你驚歎（並且沒有 JavaScript）：
傳送門
在可拖放排序的列表中用 CSS 計數器動態改變數量也很贊：傳送門
像上個例子一樣，記住——CSS 生成的 content 是不易獲取的。
4. CSS filters實現毛玻璃效果
蘋果的 iOS 7 給我們帶來了“毛玻璃”效果——看起來像磨砂玻璃窗的、半透明、模糊的元素。在蘋果的推行下，在越來越多的地方可以見到這種效果了。再現這種效果有點複雜——在有 CSS filters 之前，只能用 模糊的半透明圖片 來實現毛玻璃效果。目前幾乎所有的主流瀏覽器都支持 CSS filters，再現毛玻璃效果就簡單多了 。
目前 backdrop filters 和 filter() 函數 只有 Safari 支持，但是將來我們就可以用它們實現相似的效果了。
5. HTML Elements做背景圖
通常都是指定 JPEG 或 PNG 文档充當背景圖或漸變。但是你知道 element() 函數可以用
Element() 函數擁有無限可能，這裡有個 MDN 上的 例子 。
6. calc() 實現智能柵格
Fluid grids（流體網格劃分）很棒，但是有幾個嚴重的問題。例如，無法實現頂部和底部的空隙和左右的空隙大小相同。此外，根據所使用的柵格系統不同，標記有些混亂。即使是 flexbox 也不是做好的解決方法。但是有了可在 CSS 中作爲 value 使用的 calc() 函數，柵格會變得更棒。在 SitePoint 的此篇教程 中，George Martsoukos 列舉了幾個實例，比如間隔完美的網格畫廊。通過 CSS 預編譯器，比如 Sass，利用 calc() 實現一套柵格系統 非常簡單，並且易於維護。calc() 的瀏覽器支持性近乎完美，極力推薦使用。7. CSS calc() 對齊 position:fixed 元素
calc() 函數的另一個使用場景是對齊 fixed 定位的元素。例如，有一個左右均有空隙的 content wrapper，如果想要對 wrapper 内的一個 fixed 元素精準對齊——要算出給“right”或是“left”屬性賦值多少是很困難的。用 calc() 可以結合 relative 和 absolute 的值來精準對齊元素：
.wrapper {
max-width: 1060px;
margin: 0 auto;
}
.floating-bubble {
position: fixed;
right: calc(50% - 530px); /* 50% - half your wrapper width */
}這裡提供一個例子：傳送門
8. cubic-bezier() 動畫
要想網站或 app 的 UI 更加引人注目的話，可以使用動畫。但是標準的 easing 選項非常有限，比如“linear”或是“ease-in-out”。像是彈跳動畫更是標準選項無法實現的。使用 cubic-bezier() 函數，就可以讓元素按你想要的方式去動畫。使用 cubic-bezier() 有兩種方式—— 理解背後的數學知識 然後自己創建，或者使用 cubic-bezier 生成器 。
結語
聰明使用 CSS 函數不僅可以解決像是建立更合理的柵格系統等難題，它也給了你更多機會去創造。隨著瀏覽器的支持性越來越好，你真的應該重新審視一下你的 CSS 代碼，考慮用 calc() 等函數進行優化了。
