zoom: reset
通常來說,zoom是一個IE專用的屬性。但是webkit也開始支持它了,而且使用值reset,webkit可以實現(xiàn)不錯的效果(有趣的是,IE不支持這個值)。它讓你重設(shè)掉瀏覽器中正常的縮放行為——如果某個元素被聲明了zoom:reset,頁面上的其它元素在用戶放大頁面的時候都會跟著放大。
注:其實,我們常用來禁用chrome強制字體大小的時候用到的-webkit-text-size-adjust:none;也是可以實現(xiàn)類似的效果,不同的是,設(shè)置該屬性的元素內(nèi)的文字不會被放大/縮小,但是頁面上的其它元素則會變化——神飛
擴展閱讀: Safari Developer Library
-webkit-margin-collapse
這個屬性屬于限制級的,但是它還是非常值得關(guān)注。通常,兩個相鄰的元素的margin會折疊起來(collapse)。這意味著第一個元素的底部的邊距和第二個元素的頭部邊距會被合并到一起。
最常見的例子就是兩個相鄰的<p>元素會共享他們的margin值。想要控制這個表現(xiàn),我們可以使用-webkit-margin-collapse及其分拆后的-webkit-margin-top-collapse、-webkit-margin-bottom-collapse等屬性。默認值是collapse,值separate則停止共享margin值,也就是說,第一個元素的底部邊距和第二個元素的頭部邊距會正常疊加。
擴展閱讀: Safari Developer Library
-webkit-box-reflect
你還記得幾乎每個網(wǎng)站都把他們的網(wǎng)站logo或者頭部的文字做成倒影的那個年代嗎?謝天謝地,那個年代已經(jīng)過去了,但是如果你要在一些按鈕、導航、或者其他UI元素上更好的使用這個技術(shù),-webkit-box-reflect是更好的選擇。
這個屬性接受above、below、left和right四個關(guān)鍵詞,它們設(shè)置倒影的方向,它們和一個設(shè)置元素和它的倒影建的距離的數(shù)字一起使用。同時,蒙板圖片也是同樣支持的(看上面的-webkit-mask部分,不要搞混了哈)。倒影會自動生成并對布局沒有影響。下面的元素只用了CSS,第二個按鈕用了-webkit-box-reflect屬性。
示例
這個倒影會出現(xiàn)在它的父元素的下面并有5px的間距:
-webkit-box-reflect: below 5px;
這個倒影會投射到元素的右邊,沒有間距。然后,一個蒙板將會被應用(url(mask.png)):
-webkit-box-reflect: right 0 url(mask.png);
擴展閱讀: Safari Developer Library
出處:前端觀察
責任編輯:bluehearts
上一頁 CSS的未來:一些試驗性CSS屬性 [2] 下一頁 CSS的未來:一些試驗性CSS屬性 [4]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論,我還想發(fā)表評論。
|