CSS學習（八）渲染屬性的使用

一、css3計數器 counters
類似於列表，優點在於：可以對任意元素計數，可以自定義計數樣式，比如爲大寫的中文：壹貳叄
相關屬性，見圖

使用方法：
①定義計數器–需要計數的父元素
②增數計數器–計數元素
③調用計數器–計數元素的僞對象上
實例：

section{counter-increment:sec;}             //定義計數器
section:before{content:"開始計數-"counter(sec)""}   //在對應僞對象上調用計數器

二、CSS3 shape 形狀使用
可繪製矩形、圓角矩形、圓、橢圓、多邊形
屬性包括，如圖

使用：在chrome可以下載一個 css3 shapes Editor 的插件，它能在審查元素窗口的開發者工具中增加一個”shapes”工具，該插件支持在瀏覽器中拖動圖形生成代碼座標

三、混合模式
類似於ps的圖層混合模式
屬性包括，見圖

四、裁剪與遮罩 Clipping and Masking
作用是 按需求顯示和隱藏元素特定的部分，裁剪基於路徑，遮罩基於圖像
裁剪屬性，見圖

遮罩屬性，見圖

五、濾鏡
屬性，見圖

舉例：

img:nth-child(1){
    transform:rotate(-5deg);    //添加旋轉變化
    filter:grayscale(1);        //添加灰白濾鏡
}

以上屬性的瀏覽器兼容問題解決：可採用polyfill.js腳本文件引入來解決

注：本文所有圖片均截止極客學院HTML5視頻教程，供學習查找備用。視頻很好，向大家推薦