CSS3基礎(4)——CSS3 渲染屬性
1、 CSS3 計數器詳解javascript
CSS3計數器（CSS Counters）能夠容許咱們使用CSS對頁面中的任意元素進行計數，實現相似於有序列表的功能。css
與有序列表相比，它的突出特性在於能夠對任意元素計數，同時實現個性化計數。html
一、CSS3計數器屬性一覽表java
| 屬性git |
描述github |
| counter-resetweb |
定義計算器，包括初始值、做用域等算法 |
| counter-incrementchrome |
設置計數器的增數瀏覽器 |
| content |
在：：before和：：after中生成內容 |
| counter |
在content屬性中使用，用來調用計算器 |
| @counter-style |
自定義列表樣式 |
二、屬性詳解
①語法： counter-reset: [<identifier><integer>?]+ | none | inherit
含義：用來定義計數器的初始值和做用域，默認值爲none。
<identifier>:計數器名稱
<integer>：計算器的初始值
當元素display爲none時，該屬性失效。
計數器定義方式解析：
| 代碼 |
代碼解析 |
| counter-reset：counterA； |
定義計數器counterA，初始值爲默認值0 |
| counter-reset：counterA 6； |
定義計數器counterA，初始值爲6 |
| counter-reset：counterA 4 counterB； |
定義計數器counterA、counterB，初始值爲4和0 |
| counter-reset：counterA 4 counterB 2； |
定義計數器counterA、counterB，初始值爲4和2 |
②語法： counter-increment: [<user-ident><integer>?]+ | none
含義：用來增數計數，默認值爲none（阻止計數器增長）。
<user-ident >:須要增數的計數器名稱
<integer>：計算器增數的值，能夠爲負值。
咱們能夠同時增數多個計數器。
當元素display爲none時，該屬性失效。
計數器使用方式解析
| 代碼 |
代碼解析 |
| counter-increment：counterA； |
增數計數器counterA，每次加1 |
| counter-increment：counterA 2； |
增數計數器counterA，每次加2 |
| counter-increment：counterA 2 counterB -1； |
增數計數器counterA、counterB，分別加二、-1 |
③語法：
content：[<counter>]+
<counter>=counter(name) |
counter(name,list-style-type) |
counter(name,string) |
counter(name,string,list-style-type)
含義： 使用計數器，須要結合：：before和：：after使用。能夠同時使用多個計數器。
計數器使用方式解析
| 代碼 |
代碼解析 |
| counter：」Fig.」counter(imgCounter)； |
混合字符串和計算器imgCounter |
| counter：」Fig.」counter(imgCounter,lower-alpha)； |
指定計算器的列表格式 |
| counter： counters(section,」.」)」」； |
在計算器之間加上點號，同時在計算器最後加一個空格 |
| counter： counters(section,」.」，lower-roman)」」； |
定義計算器爲小寫羅馬數字格式，同時加點號、 空格 |
④語法：
@content-style counterStryleName{ system:算法； range:使用範圍； symbols：符號；or additive-symbols：符號； prefix：前綴；suffix：後綴； pad：補零（eg.01,02,03）; negative：負數策略； fallback：出錯後的默認值； speakas：語音策略； }
自定義counter style示例
@content-style cjk-heavenly-stem{ system:alphabetic； symbols：」\7532」 」\4E59」 」\4E19」 」\4E01」 」\620A」 」\5DF1」 」\5E9A」 」\8F9B」 」\58EC」 」\7678」 ;
/*甲 乙 丙 丁 午 己 庚 辛 壬 癸*/ suffix：「、」； }
示例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="css/begin.css"/> 7 </head> 8 <body> 9 <h1>歡迎加入極客出版社</h1> 10 <section> 11 <h2>登記我的信息</h2> 12 <p>我的信息會在以下場景中用到:</p> 13 <ol> 14 <li>課程進度推動通知</li> 15 <li>我的專家簽署合同</li> 16 <li>我的專家報酬結算</li> 17 <li>即時溝通 18 <ol> 19 <li>QQ</li> 20 <li>微信</li> 21 </ol> 22 </li> 23 <li>快遞收件地址</li> 24 </ol> 25 </section> 26
27 <section> 28 <h2>熟悉課程出品流程</h2> 29 <figure> 30 <img src="img/liuchengtu1.0.png" alt=""> 31 <figcaption> 32 課程出品流程 33 </figcaption> 34 </figure> 35 <p>佈道師在開發課程以前須要熟悉課程出品流程。</p> 36 </section> 37
38 <section> 39 <h2>觀看錄課視頻教程</h2> 40 <p>極客出版社提供一套錄課視頻教程，指導你們錄製出高品質的課程；其中的每一個環節都是必須的，務必按照要求一步一步操做，避免返工。</p> 41 </section> 42
43 <section> 44 <h2>觀看在線示例課程</h2> 45 <p>經過觀看上線課程，學習「錄課視頻教程」中規範的實際運用。</p> 46 <figure> 47 <img src="img/1.jpg" alt=""> 48 <figcaption> 49 Dart語言開發 50 </figcaption> 51 </figure> 52 <figure> 53 <img src="img/2.jpg" alt=""> 54 <figcaption> 55 Docker知識體系 56 </figcaption> 57 </figure> 58 <figure> 59 <img src="img/3.jpg" alt=""> 60 <figcaption> 61 Arduino知識體系 62 </figcaption> 63 </figure> 64 <figure> 65 <img src="img/4.jpg" alt=""> 66 <figcaption> 67 掌握經常使用快捷鍵 68 </figcaption> 69 </figure> 70 </section> 71 </body> 72 </html> 73 /*
74 section編號 75 「 新手任務-1 」 76 或「 新手任務之壹 」 77 圖片編號 78 圖i. 課程出品流程 79 列表編號 80 1：課程進度推動通知 81 2：我的專家簽署合同 82 3: 我的專家報酬結算 83 4: 即時溝通 84 4.1: QQ 85 4.2: 微信 86 5: 快遞收件地址 87 css counters實現，選擇位置。 88 1. 定義計數器—— 需計數元素的父元素 89 2. 增數計數器—— 計數元素 90 3. 調用計數器—— 計數元素的僞對象上 91 * */
92
93 body {
94 background-color: #eee;
95 color: #666;
96 counter-reset: sec pic;
97
98 }
99 h1 {
100 text-align: center;
101 }
102 section {
103 width: 800px;
104 margin: auto;
105 background-color: #fff;
106 padding: 10px 20px 20px 20px;
107 margin-bottom: 20px;
108 position: relative;
109 overflow: hidden;
110 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
111 /*定義計數器sec*/
112 counter-increment: sec;
113 }
114 section p {
115 line-height: 1.5;
116 }
117 section:before {
118 content: "「 新手任務-"counter(sec)"」";
119 font-weight: bold;
120 background-color: #35B558;
121 color: #fff;
122 text-align: center;
123 position: absolute;
124 top: 0;
125 left: 0;
126 padding: 15px 20px;
127 }
128 @-moz-document url-prefix() {
129 section:before{ 130 content:"「 新手任務之"counter(sec,simp-chinese-form)"」";
131 }
132 } 133 section h2 {
134 position: relative;
135 top: -20px;
136 left: 168px;
137 }
138 ol {
139 list-style: none;
140 /*定義計數器li*/
141 counter-reset: li;
142 }
143 li::before {
144 counter-increment: li;
145 content:counters(li,".")": ";
146 font-weight: bold;
147 color: #FF5C00;
148 }
149 figure {
150 padding: 0;
151 margin: 0 20px 20px 0;
152 display: inline-block;
153 counter-increment:pic;
154 }
155 figure img {
156 width: 300px;
157 }
158 figcaption::before {
159 content: "圖"counter(pic,lower-roman)".";
160 font-weight: bold;
161 color: #FF5C00;
162 font-size: 110%;
163 }
164 figcaption {
165 margin-top: 10px;
166 }
2、 CSS3 形狀研究
CSS3形狀（ CSS3 Shape ）描述CSS中幾何圖形的使用，對於level 1（候選標準）來講，可使用形狀屬性改變形狀旁內容流佈局。
一、CSS3形狀屬性一覽表
| 屬性 |
屬性說明 |
| shape-outside |
使用形狀改變旁邊內容的佈局流 |
| shape-inside |
使用形狀改變內部內容的佈局流 |
| shape-margin |
形狀與旁邊內容的距離 |
| shape-image-threshold |
外部圖像做形狀時，選擇圖像像素範圍 |
二、屬性詳解—shape-outside
語法： shape-outside: none | [ <basic-shape> || <shape-box> ] | <image>
含義：使用形狀改變旁邊內容的佈局流，默認值爲none。
- <basic-shape>：使用基本shapes函數繪製形狀
- <shape-box> ：利用盒模型獲得形狀
- <image> ：從外部圖像中獲取形狀
注意，只適用於浮動元素。
①繪製基本形狀
a、語法： inset() = inset( <shape-arg>{1,4} [round <border-radius>]? )
含義：繪製矩形。
inset能夠接受1-4個參數，相似於margin四個值的指定(上右下左的順序)。
border-radius爲可選參數，定義矩形的圓角。
b、語法： circle() = circle( [<shape-radius>]? [at <position>]? )
含義：繪製圓形。 默認爲一個圓心在元素中心的的圓。
shape-radius爲可選參數，表明圓的半徑。能夠爲數字、百分比，不可爲負數。
還能夠爲closest-side(近端)、farthest-side(遠端)兩個關鍵字。
position爲可選參數，表明圓心位置。
c、語法： ellipse() = ellipse( [<shape-radius>{2}]? [at <position>]? )
含義：繪製橢圓形。 默認爲一個圓心在元素中心的的圓。
shape-radius爲可選參數，兩個值分別表明x軸、y軸半徑。
能夠爲數字、百分比，不可爲負數。
還能夠爲closest-side(近端)、farthest-side(遠端)兩個關鍵字。
position爲可選參數，表明圓心位置。
d、語法： polygon() = polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
含義：繪製多邊形。
fill-rule爲可選參數，表明多邊形的填充規則。
能夠接受nonzero、evenodd做爲參數。
shape-arg表明多邊形頂點座標，每一對錶示一個點，至少須要三個點。
f、使用形狀編輯器（shape edit）輔助繪製形狀。
②利用盒模型獲得形狀
語法：
<shape-box> = <box> | margin-box
<box> = border-box | padding-box | content-box
含義：利用盒模型獲得形狀。
從外部圖像中獲得形狀
-
- 使用外部圖像獲得形狀，須要圖像具備一個alpha通道
- 圖像中alpha超過閾值的像素將會被用來定義形狀
- 閾值由shape-image-threshold屬性指定，默認值爲0
三、 屬性詳解—shape-margin
語法： shape-margin: <length> | <percentage>
含義：爲shape-outside指定margin值，默認值爲0.
<length> ：使用數字表示margin值
<percentage>：使用元素塊容器的百分比表示margin值
四、瀏覽器兼容性問題
兼容狀況很差，使用polyfill解決。
3、 CSS3 混合模式詳解
CSS3混合模式詳解 （ CSS Blend Modes ）是CSS3新增的一個魔法特性，能夠容許多個背景或多個元素進行混合，相似於Photoshop的圖層混合模式。
一、CSS3混合模式屬性一覽
| 屬性 |
屬性說明 |
| background-blend-mode |
設置多背景的混合模式 |
| mix-blend-mode |
設置多個元素的混合模式 |
| isolation |
設置元素的隔離模式 |
二、屬性詳解
①語法： background-blend-mode ： <blend-mode>
含義：設置多背景之間的混合模式，背景色、背景圖像、漸變背景之間的混合模式。
<blend-mode>能夠接受16個取值，分別爲：
normal | multiply | screen | overlay | darken | lighten |color-dodge |color-burn | hard-light | soft-light | difference | exclusion |hue | saturation | color | luminosity等
②語法： mix-blend-mode：<blend-mode>
含義：設置多元素之間的混合模式。
html元素之間、html與svg元素之間都可以。
③語法： isolation：auto | isolate
含義：設置元素的隔離模式。
| 屬性值 |
含義 |
| auto（默認值） |
當前元素和全部下方元素均產生混合。 |
| isolate |
產生一個隔離元素，只有隔離元素內的元素參與混合。 |
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>測試混合模式</title> 6 <link rel="stylesheet" type="text/css" href="css/testBegin.css"/> 7 </head> 8 <body> 9 <h1>混合模式實現多背景動畫</h1> 10 </body> 11 </html> 12
13 html,body{
14 width: 100%;
15 height: 100%;
16 }
17 body{
18 background: url(../img/cloud.jpg), 19 url(../img/mountain.jpg) no-repeat center center fixed;
20 background-size: cover,cover;
21 background-blend-mode: overlay,normal;
22 animation:bgAnimation 10s linear infinite;
23 }
24 @keyframes bgAnimation {
25 from{ 26 background-position:0 0,center center ;
27 }
28 to{
29 background-position: -1000px 0, center center;
30 }
31 }
顯示效果：雲層滾動效果。
4、 CSS3 裁剪與遮罩解析
CSS3裁剪與遮罩（Clipping and Masking）用來隱藏元素的一部分而顯示另外一部分，裁剪使用路徑、遮罩使用圖像來控制元素的顯示。
一、CSS3裁剪
① CSS3裁剪屬性一覽
| 屬性 |
屬性說明 |
| clip |
舊的裁剪屬性，只適用於絕對定位元素，只能用矩形 |
| clip-path |
設置多個元素的混合模式 |
| background-clip |
設置背景裁剪 |
② 屬性詳解
a、語法： clip: auto | rect(top, right, bottom, left)
含義：設置絕對定位元素的裁剪，爲不建議使用的屬性，auto值爲默認值。 自對象左上角爲(0,0) 計算的四個偏移數值。若是爲auto，則此邊不剪切。
b、語法： clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none
含義：使用基礎形狀或引用clipPath元素裁剪元素, none值爲默認值。
| 屬性值 |
含義 |
| none |
默認值，不裁剪 |
| basic-shape |
使用基礎形狀裁剪元素（類同於CSS3 Shape中的形狀） |
| <geometry-box>=<shape-box> | fill-box | stroke-box | view-box |
設置基礎形狀的引用盒模型 |
| <clip-source> = <url> |
引用svg定義的<clipPath>元素 |
③ 使用基礎形狀裁剪元素
| 示例代碼 |
解釋說明 |
| clip-path: circle(50% at 50% 50%); |
圓形裁剪 |
| clip-path: ellipse(25% 40% at 50% 50%); |
橢圓形裁剪 |
| clip-path: inset(12% 20% 15% 10%); |
矩形裁剪 |
| clip-path: polygon(50% 0%, 0% 100%, 100% 100%); |
三角形裁剪 |
| clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); |
菱形裁剪 |
| clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); |
五邊形裁剪 |
| 使用CSS Clip-path Maker——Clippy或使用谷歌瀏覽器插件CSS Shapes Editor建立編輯clip-path |
|
④ 引用svg定義的<clipPath>元素裁剪元素
<img class="cilip-svg" src="harry.jpg" alt="Harry Potter> <svg width="0" height="0"> <defs> <clipPath id="myClip"> <circle cx="100" cy="100" r="40" /> <circle cx="60" cy="60" r="40" /> </clipPath> </defs> </svg> .clip-svg{ clip-path:url(#myClip);
}
⑤語法：-webkit-background-clip: text；
含義：使用文本裁剪背景圖像。
目前只支持webkit內核瀏覽器，使用polyfill解決兼容問題。
二、CSS3遮罩
①CSS3遮罩屬性一覽
| 屬性 |
屬性說明 |
| mask-image |
設置元素的遮罩圖像 |
| mask-mode（mask-type） |
設置遮罩模式 |
| mask-repeat |
設置遮罩重複 |
| mask-position |
設置遮罩位置 |
| mask-clip |
設置遮罩影響區域 |
| mask-origin |
設置計算mask-position時的參考原點位置 |
| mask-size |
設置遮罩大小 |
| mask-composite |
設置當前遮罩圖層與下面圖層的結合方式 |
②屬性詳解
a、語法： mask-image: none | <image> | <mask-source>
含義：設置元素的遮罩圖像, none值爲默認值。
| 屬性值 |
含義 |
| none |
默認值，不遮罩 |
| <mask-source>=<url> |
指定<mask>元素的引用，如url(abc.svg#mask) |
| <image> |
指定遮罩圖像，如url(abc.png) |
b、語法： mask-mode: alpha | luminance | auto
含義：設置遮罩的模式, auto爲默認值。
| 屬性值 |
含義 |
| auto |
默認值，根據mask-image值類型自定指定模式 |
| alpha |
遮罩圖像的透明度部分用做遮罩 |
| luminance |
遮罩圖像的亮度用做遮罩 |
c、語法： mask-repeat: repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
含義：設置遮罩的重複模式, no-repeat爲默認值。
等同於background-repeat的值，能夠接受1-2個值，表明橫向和縱向。
| 屬性值 |
含義 |
| no-repeat |
默認值，不重複 |
| repeat |
重複 |
| space |
以相同的間距平鋪且填充滿整個容器或某個方向 |
| round |
自動縮放直到適應且填充滿整個容器 |
d、語法：
mask-position: <position> [ , <position> ]*
<position> = [ left | center | right | top | bottom | <percentage> | <length> ]
含義：設置遮罩的位置模式, center爲默認值。
能夠接受兩個值，分別用於水平和垂直方向。
等同於background-repeat的值，能夠接受1-2個值，
| 屬性值 |
含義 |
| left | center | right | top | bottom |
關鍵字 |
| <percentage> 、<length> |
百分比、數值，能夠爲負值 |
e、語法：
mask-clip: <geometry-box> | no-clip
<geometry-box> = <shape-box> | fill | stroke | view-box
<shape-box> = margin-box | border-box | padding-box | content-box
含義：設置遮罩的影響區域, border-box爲默認值。
f、語法：
mask-origin: <geometry-box>
<geometry-box> = <shape-box> | fill | stroke | view-box
<shape-box> = margin-box | border-box | padding-box | content-box
含義：設置計算mask-position時的參考原點位置, border-box爲默認值。
g、語法：
mask-composite: <compositing-operator>#
<compositing-operator > = add | subtract | intersect | exclude
含義：設置當前遮罩圖層與下面圖層的結合方式。分別爲添加、減去、交叉、排除等同於svg裏的source-over、source-out、source-in、XOR。
h、語法：
mask: <mask-reference> <masking-mode>? || <position> [ / <bg-size> ]? ||<repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] ||<compositing-operator>
含義：設置遮罩的複合屬性。
一個< geometry-box >值將會同時設置mask-origin和mask-licp，若是有兩個值則分別表明mask-origin和mask-clip。
mask-repeat、mask-postion、mask-clip、mask-origin、mask-size對<mask>element無效
三、CSS3邊框遮罩
①CSS3邊框遮罩屬性一覽
| 屬性 |
屬性說明 |
| mask-border-source |
設置邊框遮罩的圖像 |
| mask-border-mode |
設置邊框遮罩的模式 |
| mask-border-slice |
設置邊框遮罩的切割方式 |
| mask-border-width |
設置邊框遮罩的寬度 |
| mask-border-outset |
邊框遮罩超越邊框的數值 |
| mask-border-repeat |
邊框遮罩重複方式 |
| mask-border |
邊框遮罩複合屬性 |
②屬性詳解
a、語法： mask-border-source: none | <image>
含義：設置邊框遮罩的圖像，none爲默認值。相似於border-image-source。
b、語法: mask-border-mode: luminance | alpha
含義:設置邊框遮罩的模式，alpha爲默認值。相似於mask-mode。
c、語法: mask-border-slice: [<number> | <percentage>]{1,4} fill?
含義:設置邊框遮罩的切割方式，0爲默認值。相似於border-image-slice。
該屬性指定從上，右，下，左方位來分隔圖像，將圖像分紅4個角，4條邊和中間區域共9份，中間區域始終是透明的（即沒填充），除非加上關鍵字 fill。
d、語法: mask-border-width: [ <length> | <percentage> | <number> | auto ]{1,4}
含義:設置邊框遮罩的厚度，auto爲默認值。相似於border-image-width。
e、語法:mask-border-outset: [ <length> | <number> ]{1,4}
含義:設置邊框遮罩的擴展，0爲默認值。相似於border-image-outset。
f、語法: mask-border-repeat: [ stretch | repeat | round | space ]{1,2}
含義:設置邊框遮罩的重複方式， stretch爲默認值。相似於border-image-repeat。
g、語法:
mask-border: <' mask-border-source '> || <' mask-border-slice '> [ / <' mask-border-width '> | / <' mask-border-width '>? / <' mask-border-outset '> ]? || <' mask-border-repeat '>
含義:設置邊框遮罩的複合屬性，相似於border-image。
5、 CSS3 濾鏡詳解
CSS3濾鏡（CSS3 Filters）是CSS3的新增的一個魔法屬性，能夠對網頁元素添加神奇圖像處理效果，相似Photoshop裏面的濾鏡。
濾鏡能夠實現圖像、背景、邊框的模糊、顏色調整，語法與IE的filter大相徑庭。
一、語法
.filter-element { filter: none | <filter-function-list> } <filter-function-list> = [ <filter-function> | <url> ]+ <filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()>| <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()>
含義：設置元素的濾鏡效果。
二、屬性一覽表
| filter-function |
解釋 |
| blur()=blur( <length> ) |
模糊，默認值爲0 |
| brightness()=brightness( [ <number> | <percentage> ] ) |
亮度，默認值爲100% |
| contrast() = contrast( [ <number> | <percentage> ] ) |
對比度，默認值爲100% |
| saturate() = saturate( [ <number> | <percentage> ] ) |
飽和度，默認值爲100% |
| grayscale() = grayscale( [ <number> | <percentage> ] ) |
灰度，默認值爲100% |
| hue-rotate() = hue-rotate( <angle> ) |
色相旋轉，默認值爲0deg |
| invert() = invert( [ <number> | <percentage> ] ) |
反色，默認值爲0 |
| sepia() = sepia( [ <number> | <percentage> ] ) |
褐色，默認值爲0 |
| opacity() = opacity( [ <number> | <percentage> ] ) |
透明度，默認值爲100% |
| drop-shadow() = drop-shadow( <length>{2,3} <color>? ) |
陰影，默認數字爲0，默認顏色爲color屬性顏色 |
三、示例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>實例演示-濾鏡使用</title> 6 <link href="css/galleryBegin.css" type="text/css" rel="stylesheet"> 7 <link href="css/clolorChange.css" type="text/css" rel="stylesheet"> 8 <script src="js/prefixfree.min.js" type="text/javascript" charset="UTF-8"></script> 9 </head> 10 <body> 11 <!--div.cardfan>img[src="img/$.jpg"]*3--> 12 <div class="cardfan"> 13 <img src="img/1.jpg" alt=""/> 14 <img src="img/2.jpg" alt=""/> 15 <img src="img/3.jpg" alt=""/> 16 </div> 17 <script> 18 // this is important 19 var polyfilter_scriptpath = 'js/lib/'; 20 </script> 21 <script src="js/lib/contentloaded.js"></script> 22 <script src="js/lib/cssParser.js"></script> 23 <script src="js/lib/css-filters-polyfill.js"></script> 24 </body> 25 </html> 26 27 .cardfan{ 28 width: 30%; 29 margin: 4rem auto; 30 position: relative; 31 } 32 .cardfan img{ 33 position: absolute; 34 width: 100%; 35 height: auto; 36 border: 10px solid #fee; 37 box-shadow: 2px 2px 4px 0 rgba(0,0,0,.2); 38 transform-origin:center 600px ; 39 transition: all 1s linear; 40 } 41 div.cardfan img:nth-child(1) { 42 transform: rotate(-5deg); 43 z-index: 3; 44 filter: grayscale(1); 45 } 46 div.cardfan:hover img:nth-child(1){ 47 transform: rotate(-25deg); 48 } 49 div.cardfan img:nth-child(1):hover { 50 filter: grayscale(0); 51 } 52 53 div.cardfan img:nth-child(2) { 54 filter: sepia(1); 55 background-color: #5E2612; 56 } 57 div.cardfan img:nth-child(2):hover { 58 filter: sepia(0); 59 } 60 div.cardfan img:nth-child(3) { 61 z-index: -1; 62 transform: rotate(5deg); 63 filter: blur(3px); 64 } 65 div.cardfan:hover img:nth-child(3){ 66 transform: rotate(25deg); 67 } 68 div.cardfan img:nth-child(3):hover { 69 filter: blur(0); 70 }
- 1. CSS3基礎(4)——CSS3 渲染屬性
- 2. 【css3】 render tree --- 渲染樹
- 3. CSS3屬性-webkit-font-smoothing字體抗鋸齒渲染
- 4. CSS3基礎(3)——CSS3 佈局屬性全接觸
- 5. css3 transition屬性
- 6. css3屬性
- 7. CSS3 perspective 屬性
- 8. CSS3 ： transition 屬性
- 9. CSS3 Transition屬性
- 10. CSS3 filter屬性
- 更多相關文章...
- • Scala 基礎語法 - Scala教程
- • Rust 基礎語法 - RUST 教程
- • JDK13 GA發佈：5大特性解讀
- • ☆基於Java Instrument的Agent實現
-
每一个你不满意的现在，都有一个你没有努力的曾经。