那些暖人心卻鮮為人知的CSS屬性

CSS中有很多設(shè)計(jì)很體貼但很少有人知道的屬性，今天就總結(jié)一下這些屬性。

attr

CSS表達(dá)式 attr()?用來(lái)獲取選擇到的元素的某一HTML屬性值，并用于其樣式。它也可以用于偽元素，屬性值采用偽元素所依附的元素。

例子：

運(yùn)行結(jié)果：

瀏覽器支持情況：

IE只有IE11才支持，其他瀏覽器可以安全使用

currentColor

currentColor不是一個(gè)css屬性，而是color的屬性值。它返回當(dāng)前的標(biāo)簽所繼承的文字顏色。

例子：

運(yùn)行結(jié)果：

可以看出，最終.inside的border顏色為red，即當(dāng)前元素的color值。

兼容性：

user-select

控制選取能否被選擇. (可以禁止用戶選中內(nèi)容)

例子：

瀏覽器兼容：

selection

::selection?CSS偽元素應(yīng)用于文檔中被用戶高亮的部分（比如使用鼠標(biāo)或其他選擇設(shè)備選中的部分）。

例子：

運(yùn)行結(jié)果：

瀏覽器兼容：

will-change

CSS?屬性?will-change?為web開(kāi)發(fā)者提供了一種告知瀏覽器該元素會(huì)有哪些變化的方法，這樣瀏覽器可以在元素屬性真正發(fā)生變化之前提前做好對(duì)應(yīng)的優(yōu)化準(zhǔn)備工作。?這種優(yōu)化可以將一部分復(fù)雜的計(jì)算工作提前準(zhǔn)備好，使頁(yè)面的反應(yīng)更為快速靈敏。

擴(kuò)展閱讀：

具體使用實(shí)踐，大家可以看張?chǎng)涡竦牟┛?/p>

《使用CSS3 will-change提高頁(yè)面滾動(dòng)、動(dòng)畫(huà)等渲染性能》

http://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/

瀏覽器兼容：

推薦閱讀