隨著css語(yǔ)言的廣泛使用和不斷發(fā)展，現(xiàn)在css能做的功能更加多樣宇攻，而且相信隨著時(shí)間的推移惫叛，也將更加強(qiáng)大。css是前端開發(fā)必備的樣式表語(yǔ)言逞刷，為提升開發(fā)效率嘉涌，掌握一定的技巧必不可少，下面我們就一起來(lái)看看讓程序猿代碼開發(fā)效率飛起來(lái)的8個(gè)css函數(shù)小技巧吧夸浅。
1.純CSS Tooltip
許多網(wǎng)站還是在使用JavaScript來(lái)創(chuàng)建Tooltip效果仑最，但實(shí)際上通過(guò)CSS能更簡(jiǎn)單的實(shí)現(xiàn)。最簡(jiǎn)單的方法是在你的HTML代碼中添加一個(gè)帶有提示文本的屬性帆喇，比如 data-tooltip="…" 警医。然后你就可以在你的CSS文件中添加以下的代碼通過(guò) attr() 函數(shù)來(lái)顯示提示文字：
.tooltip::after {
content: attr(data-tooltip);
}
相當(dāng)簡(jiǎn)單對(duì)吧？當(dāng)然實(shí)際上我們還需要更多的代碼來(lái)給提示增加樣式坯钦，但是不用擔(dān)心预皇，已經(jīng)有了為此設(shè)計(jì)的強(qiáng)大且純粹的叫 Hint.css 的CSS庫(kù)和 Balloon.css 。
2.使用自定義數(shù)據(jù)屬性和 attr() 函數(shù)
我們已經(jīng)學(xué)會(huì)如何使用 attr() 來(lái)創(chuàng)建提示婉刀，另外還有一些場(chǎng)景能使用到這個(gè)函數(shù)吟温。通過(guò)與數(shù)據(jù)屬性相結(jié)合，你可以通過(guò)很簡(jiǎn)單的一行HTML代碼來(lái)創(chuàng)建帶有標(biāo)題和描述的縮略圖：
<a class="caption" href="#" data-title="Vulture" data-description="...">
<img src="img.jpg" alt="Illustration"/>
</a>
現(xiàn)在你可以通過(guò) attr() 函數(shù)來(lái)顯示標(biāo)題與描述：
.caption::after {
content: attr(data-title);
...
}
以下為具體的例子：
注意：這個(gè)方法在瀏覽器支持方面可能會(huì)有一些問(wèn)題突颊，具體內(nèi)容你可以查看 Accessibility support for CSS generated content 這篇文章鲁豪。
- CSS Counters
你可以通過(guò)CSS Counters實(shí)現(xiàn)超棒的功能。這不是一個(gè)非常為人熟知的屬性律秃，大多數(shù)人甚至可能認(rèn)為瀏覽器不能很好的支持這個(gè)屬性爬橡，但事實(shí)上所有的瀏覽器都支持這個(gè)屬性：
但是你不應(yīng)該將CSS counters使用在有序列表 <ol> 上，它更適合使用在類似分頁(yè)或者圖片庫(kù)下面顯示的數(shù)字上棒动。你可以通過(guò)下面的例子看出如何使用很少的代碼（甚至不使用JavaScript）來(lái)對(duì)選中的項(xiàng)目進(jìn)行計(jì)數(shù)：
CSS counters也非常適合顯示可通過(guò)拖放進(jìn)行重新排序的項(xiàng)目列表上動(dòng)態(tài)變化的數(shù)字：
正如最后一個(gè)例子糙申，我們需要記住，通過(guò)該方法生成的內(nèi)容在可訪問(wèn)性上可能會(huì)有些問(wèn)題迁客。
4.CSS濾鏡實(shí)現(xiàn)的磨砂效果
在iOS7中郭宝，蘋果實(shí)現(xiàn)了“磨砂玻璃”的效果--半透明的，模糊的元素掷漱，看起來(lái)像覆蓋了一層磨砂玻璃粘室。受到蘋果的啟發(fā)，這種效果被運(yùn)用到很多地方卜范。在CSS濾鏡出現(xiàn)之前要重現(xiàn)這個(gè)效果還是有些棘手的衔统。你必須通過(guò)使用 模糊圖片 來(lái)實(shí)現(xiàn)這種毛玻璃的效果。但現(xiàn)在CSS
濾鏡得到了幾乎所有的主流瀏覽器的支持海雪，所以要 重現(xiàn)這個(gè)效果 就簡(jiǎn)單很多了锦爵。
在未來(lái)，我們可以通過(guò)背景過(guò)濾器和 filter() 函數(shù) 來(lái)實(shí)現(xiàn)這樣的效果奥裸，但目前只有 Safari 同時(shí)支持這兩個(gè)功能险掀。
有關(guān)于CSS的 filter 更多的介紹可以點(diǎn)擊這里進(jìn)行了解。
5.將HTML元素作為背景
一般我們可以設(shè)置一個(gè)JPEG或者PNG文件作為背景湾宙，或者也可以設(shè)置一個(gè)漸變的背景樟氢。但是你知道可以通過(guò)使用 element() 函數(shù)，從而將一個(gè) <div> 設(shè)置為背景圖片嗎侠鳄？現(xiàn)在埠啃， element() 函數(shù)只有在Firefox中得到了支持：
可能性是無(wú)止境的， 這里 是MDN上的一個(gè)例子伟恶。
有關(guān)于CSS的 element() 函數(shù)的相關(guān)介紹可以點(diǎn)擊這里碴开。
6.通過(guò) calc() 創(chuàng)建更好的網(wǎng)格
流體網(wǎng)格雖然很棒但是仍然存在很嚴(yán)重的問(wèn)題。比如博秫，在頂部和底部的間距大小幾乎不可能與在左邊和右邊的間距大小相同潦牛。另外，若使用的網(wǎng)格系統(tǒng)不一樣挡育，標(biāo)記就會(huì)非嘲照溃混亂。雖然彈性布局不是最終的解決方案静盅，但是通過(guò)與 calc() （可以在CSS文件中作為一個(gè)屬性
值）相結(jié)合良价，我們能夠創(chuàng)建一個(gè)更好的網(wǎng)格。在 這里 ,George Martsoukos列舉了很多例子蒿叠，比如擁有完美間距的畫廊網(wǎng)格明垢。通過(guò)使用CSS預(yù)編譯語(yǔ)言，比如Sass市咽， 組建一個(gè)創(chuàng)造性的網(wǎng)格系統(tǒng) 可以非常簡(jiǎn)單且易于維護(hù)痊银。同時(shí)瀏覽器對(duì) calc() 的支持幾乎完美，因此
calc() 絕對(duì)是你應(yīng)該掌握的一個(gè)功能施绎。
有關(guān)于CSS的 calc() 函數(shù)相關(guān)的介紹可以點(diǎn)擊這里溯革。
- 通過(guò) calc() 對(duì)齊 position:fixed 元素
calc() 的另一個(gè)作用是用來(lái)對(duì)齊 position:fixed 的元素贞绳。比如，你有一個(gè)內(nèi)容封裝器致稀，它左右都有流動(dòng)的間距冈闭，你希望在這個(gè)內(nèi)容封裝器內(nèi)精確對(duì)齊 position 為 fixed 的元素，但是這種情況下要計(jì)算出 left 和 right 屬性的具體賦值就很困難抖单。通過(guò) calc() ,你
可以結(jié)合相對(duì)和絕對(duì)的值來(lái)精確定位你的元素：
.wrapper {
max-width: 1060px;
margin: 0 auto;
}
.floating-bubble {
position: fixed;
right: calc(50% - 530px); /* 50% - half your wrapper width */
}
比如：
有關(guān)于這方面的詳細(xì)介紹可以閱讀 @brnnbrn 寫的《 Aligning position:fixed Elements with CSS calc 》一文萎攒。
8.使用 cubic-bezier() 實(shí)現(xiàn)動(dòng)畫
為了使一個(gè)網(wǎng)站或者APP的用戶界面更具有吸引力，你可使用一些動(dòng)畫矛绘，但是可以選擇的過(guò)渡效果的速度曲線是相當(dāng)有限的耍休，比如， linear 或者 ease-in-out 货矮。而標(biāo)準(zhǔn)的速度曲線連彈力運(yùn)動(dòng)的效果都實(shí)現(xiàn)不了羊精。通過(guò)使用 cubic-bezier() 函數(shù)，你可以精確實(shí)現(xiàn)你想要
的動(dòng)畫效果囚玫。
有兩種方法使用 cubic-bezier() ——了解 背后的機(jī)制 后自己創(chuàng)建园匹，或者是使用 cubic-bezier 生成器 。
說(shuō)實(shí)話劫灶，我使用的是后者裸违。
有關(guān)于 cubic-bezier() 詳細(xì)的介紹可以點(diǎn)擊這里。
總結(jié)
更加聰明的使用CSS函數(shù)不僅僅可以解決上面的問(wèn)題比如創(chuàng)建一個(gè)更好的網(wǎng)格本昏，它還可以給你更多的創(chuàng)作自由供汛。隨著瀏覽器支持越來(lái)越好，你可以使用CSS函數(shù)比如 calc() 來(lái)修改和提升一下你之前的CSS代碼涌穆。最后怔昨，希望本文的分享能對(duì)大家有所幫助。
相關(guān)教程推薦：http://www.maiziedu.com/course/421/
文章來(lái)源：W3CPlus
