CSS3 基礎

複製代碼
  1 /*border屬性*/
  2 div{
  3     border:2px;
  4     border-radius:25px;/*用於建立圓角*/
  5     box-shadow: 10px 10px 5px #888888;/*添加陰影*/}
  6 
  7 #round{border-image: url(border.png) 30 30 round;
  8        -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
  9        -o-border-image:url(border.png) 30 30 round;/* Opera */
 10 }
 11 #stretch{
 12      border-image:url(border.png) 30 30 stretch;
 13      -webkit-border-image:url(borde.png) 30 30 stretch;
 14      -o-border-image:;
 15 
 16 }
 17 
 18 /*背景*/
 19 div{
 20     background-image: url(img.png);
 21     background-size: 80px 60px;/*指定背景圖像的大小*/
 22     background-repeat: no-repeat;
 23 }
 24 div{
 25     background-image: url(img.png);
 26     background-size: 100% 100%;/*指定背景圖片的填充範圍*/
 27     background-repeat: no-repeat;
 28     background-origin: content-box;/*指定背景圖片的位置區域參數有border-box.padding-box.content-box*/
 29 
 30 }
 31 body
 32 {
 33 background-image:url(img_flwr.gif),url(img_tree.gif);/*容許加入多個圖形*/
 34 } 
 35 
 36 
 37 /*gradients漸變 -在兩個或多個指定的顏色之間顯示平穩的過渡*/
 38 
 39 /*語法：background: linear-gradient(direction, color-stop1, color-stop2, ...);*/
 40 
 41 #grad{/*上到下的線性漸變*/ /*IE9及以前的版本不支持這個屬性*/
 42     background: -webkit-linear-gradient(red,blue);/*safari5.1-6.0*/
 43     background: -moz-linear-gradient(red,blue);
 44     background: -o-linear-gradient(red,blue);
 45     background: linear-gradient(red,blue);/*標準語法*/
 46 
 47 }
 48 #grad{/*左到右的線性漸變*/
 49     background: -webkit-linear-gradient(left,red,blue);/*safari5.1-6.0*/
 50     background: -moz-linear-gradient(left,red,blue);
 51     background: -o-linear-gradient(left,red,blue);
 52     background: linear-gradient(left,red,blue);
 53 }
 54 #grad{/*上左對角線漸變下左*/
 55     background: -webkit-linear-gradient(top left,red,blue);/*safari5.1-6.0 默認表示左下角*/
 56     background: -o-linear-gradient:(bottom right,red,blue);
 57     background: -moz-linear-gradient(bottom right,red,blue);
 58     background: linear-gradient(to bottom right,red,blue);/*標準語法，必須放在最後*/
 59 }
 60 
 61 /*角度漸變*/
 62 /*語法：background: linear-gradient(angle, color-stop1, color-stop2); */
 63 #grad{
 64     background: -webkit-linear-gradient(90deg,red,blue);
 65     background: -o-linear-gradient:(90deg,red,blue);
 66     background: -moz-linear-gradient(90deg,red,blue);
 67     background: linear-gradient:(90deg,red,blue);/*默認語法，必須放在最後*/
 68 }
 69 /*帶彩虹的線性漸變*/
 70 #grad{
 71     background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);/*safari5.1-6.0*/
 72     background:-moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 73     background:-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 74     background:linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);/*標準的語法，必須放在最後*/ 
 75 }
 76 
 77 /*使用透明度Transparency
 78 添加透明度，咱們使用 rgba() 函數來定義顏色結點。rgba() 函數中的最後一個參數能夠是從 0 到 1 的值，它定義了顏色的透明度：0 表示徹底透明，1 表示徹底不透明。
 79 */
 80 #grad{/*從左到右的線性漸變，帶有透明度*/
 81    background:-webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
 82    background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
 83    background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
 84    background: linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1))/*標準的語法，必須放在最後*/
 85 }
 86 
 87 /*重複的線性漸變*/
 88 #grad{
 89     background:-webkit-repeating-linear-gradient(red,yellow 5%,blue 5%);
 90     background: -o-repeating-linear-gradient(red,yellow 5%,blue 5%);
 91     background: -moz-repeating-linear-gradient(red,yellow 5%,blue 5%);
 92     background: repeating-linear-gradient(red,yellow 5%,blue 5%);
 93 }
 94 
 95 /*徑向的線性漸變
 96 語法：background: radial-gradient(center, shape size, start-color, ..., last-color);
 97 默認狀況下，漸變的中心是 center（表示在中心點），
 98 漸變的形狀是 ellipse（表示橢圓形），
 99 漸變的大小是 farthest-corner（表示到最遠的角落）。
100 */
101 #grad{
102     background: -webkit-radial-gradient(red,green,blue);
103     background: -o-radial-gradient(red,green,blue);
104     background: -moz-radial-gradient(red,green,blue);
105     background: radial-gradient(red,green,blue);
106 }
107 /*徑向漸變*/
108 #grad{
109     background: -webkit-radial-gradient(red 5%,green 10%,blue 40%);
110     background: -o-radial-gradient(red 5%,green 10%,blue 40%);
111     background: -moz-radial-gradient(red 5%,green 10%,blue 40%);
112     background: radial-gradient(red 5%,green 10%,blue 40%);
113 }
114 /*設置形狀
115 形狀有circle(圓形) 或 ellipse(橢圓)*/
116 #grad{
117     height: 150px;
118     width:200px;
119     background:-webkit-radial-gradient:(circle,red,yellow,green);/*safari5.1-6.0*/
120     background: -o-radial-gradient(circle,red,yellow,green);
121     background: -moz-radial-gradient(circle,red,yellow,green);
122     background: radial-gradient(circle,red,yellow,green);/*標準語法，必須放在最後*/
123 }
124 
125 
126 
127 
128 
129       /*文本效果*/
130 /*文本陰影與換行
131 text-shadow:水平陰影，垂直陰影，模糊的距離，以及陰影的顏色.
132 word-wrap：break-word*/
133 p{
134     text-shadow:5px 5px 5px #fff;
135     word-wrap:break-word;/*容許長文本換行*/
136 }
137 
138 /*css3字體
139 *@font-face規則
140 *Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字體.
141  Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字體)和.otf(OpenType)字體字體類型）。
142  Internet Explorer 9 只支持 .eot 字體.
143 *
144 */
145 <style>
146 @font-face
147 {
148     font-family: myfonts;
149     src:url('Sansation_Light.ttf'),
150         url('Sansation_Light.eot');/*for IE 9 定義字體文件的 URL*/
151         font-weight: bold;
152         /*必須添加另外一個包含粗體文字的@font-face規則
153           瀏覽器使用這一文本的字體系列"myFirstFont"時應該呈現爲粗體
154         */
155         font-stretch:condensed;/*定義如何拉伸字體*/
156 }
157 div{
158     font-style: myfonts;
159 }
160 </style>
161 
162 
163 /*2D轉換*/
164 /*2D變換方法：
165     translate()
166     rotate()
167     scale()
168     skew()
169     matrix()
170 */
171 
172 div{
173     transform:rotate(30deg);/*旋轉30度*/
174     -ms-transform:rotate(30deg);/*IE 9*/
175     -webkit-transform:rotate(30deg);
176 }
177 
178 /*translate方法*/
179 div{
180     transform:translate(50px,100px);/*從起始位置（o o）移動到位置（50px，100px）*/
181     -ms-transform:translate(50px,100px);
182     -webkit-transform:translate(50px,100px);
183 }
184 
185 /*scale方法--scale()方法，該元素增長或減小的大小，取決於寬度（X軸）和高度（Y軸）的參數*/
186 div{
187     transform:scale(2,4);/*表示寬度變爲原來的兩倍，長度變爲原來的四倍*/
188     -ms-transform:scale(2,4);
189     -webkit-transform:scale(2,4);
190 }
191 
192 /*skew方法
193 根據橫向（X軸）和垂直（Y軸）線參數給定角度
194 */
195 
196 div{
197     transform:skew(30deg,20deg);/*繞X軸和Y軸周圍20度30度的元素。*/
198     -ms-transform:skew(30deg,20deg);
199     -webkit-transform:skew(30deg,20deg);
200 }
201 
202 /*matrix()方法
203 六個參數，包含旋轉，縮放，移動（平移）和傾斜功能
204 */
205 div{
206     transform:matrix(0.886,0.5,-0.5,0.886,0,0);
207     -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
208     -webkit-transform:matrix((0.866,0.5,-0.5,0.866,0,0));
209 }
210 
211 /*3D轉換*/
212 /*rotateX()方法
213 圍繞其在一個給定度數X軸旋轉的元素
214 */
215 div{
216     transform:rotateX(120deg);
217     -webkit-transform:rotateX(120deg);/*safari and chrome*/
218 }
219 /*rotateY()方法
220 圍繞其在一個給定度數Y軸旋轉的元素
221 */
222 div{
223    transform:rotateY(120deg);
224    -webkit-transform:rotateY(120deg);
225 }
226 
227 /*css3過渡*/
228 div{
229     height: 100px;
230     width:200px;
231     background:blue;
232     transition:width 2s;/*用於寬度屬性的過渡效果，時長爲 2 秒*/
233     -webkit-transition:width 2s;
234 }
235 div:hover{
236     width: 400px;
237 }
238 /*多項轉變*/
239 div{
240     height:100px;
241     width:200px;
242     background:blue;
243     -webkit-transition:width 2s,height 2s,-webkit-transform 2s;/*for safari 3.1-6.0 and chrome */
244     transiton:width 2s,height 2s,transform 2s;
245 }
246 div:hover{
247     width:200px;
248     height: 400px;
249     -webkit-transform:rotate(180deg);
250     transform:rotate(180deg);
251 }
252 /*全部過分屬性*/
253 div{
254     width:100px;
255     height:100px;
256     background:blue;
257     transition-property:width;/*規定應用過分的css屬性的名稱*/
258     transition-duration:2s;/*定義過渡效果花費的時間，默認是0*/
259 
260     transition-timing-function:linear;/*規定過渡效果的事件曲線，默認是ease*/
261     transition-delay:2s;/*規定過渡效果開始的時間。默認是0*/
262     /*safari*/
263     /*簡寫方式：
264     transitiion:width 2s linear 2s;
265     -webkit-transiton:width 2s linear 2s;
266    */
267     -webkit-transiton-property:width;
268     -webkit-transiton-duration:1s;
269     -webkit-transition-timing-function:linear;
270     -webkit-transition-delay:2s;
271 }
272 
273 
274 /*動畫效果*/
275 /*第一種*/
276 div{
277     awidth:200px;
278     height: 200px;
279     background: red;
280     animation:myfirst 5s;
281     -webkit-animation:myfirst 5s;
282 }
283 @keyframes myfirst{
284     from{background:red;
285 
286     }to{
287         background:blue;
288     }
289 }
290 
291 -webkit-@keyframe myfirst{/*for Safari and chrome*/
292     from{
293         background:red;
294     }to{
295         background:blue;
296     }
297 }
298 /*第二種*/
299 div{
300     width:200px;
301     height: 200px;
302     background: red;
303     animation:myfirst 5s;
304     -webkit-animation:myfirst 5s;
305 }
306 
307 @keyframe myfirst{
308   0% {background:red;}
309   25% {background: yellow;}
310   50% {background: blue;}
311   75%{background: green;}
312 }
313 -weblit-@keyframe myfirst{
314     0% {background:red;}
315     25% {background: yellow;}
316     50% {background: blue;}
317     75%{background: green;}
318 }
319 
320 /*第三種*/
321 div{
322     width:200px;
323     height:300px;
324     background: red;
325     position: relative;
326     animation:myfirst 5s;
327     -webkit-animation:myfirst 5s;
328 }
329 @keyframe myfirst{
330    0%{background:red;left:0px;top:0px;}
331    25%{background:blue;left:100px;top:0px;}
332    50%{background: green;left:100px;top:100px;}
333    75%{background: yellow;left:0px;top:100px;}
334    100%{background: red;left:0px;top:0px;}
335 }
336 -webkit-@keyframe myfirst{
337     0%{background: red;left:0px;top:0px;}
338     25%{background: blue;left:100px;top:0px;}
339     50%{background: green;left:100px;top:100px;}
340     75%{background:yellow;left:0px;top:100px;}
341     100%{background:red;left:0px;top:0px;}
342 }
343 /*第四種*/
344 div{
345     width:100px;
346     height:100px;
347     background:red;
348     animation-name:myfirst;
349     animation-timing-function:linear;
350     animation-durarion:5s;
351     animation-delay:2s;
352     animation-iteration-count:infinite;
353     animation-direction:alternate;
354     animation-play-state:running;
355     /*safari and chrome*/
356     -webkit-animation-name:myfirst;/**/
357     -webkit-animation-duration:5s;/*設置動畫完成的時間*/
358 
359     -webkit-animation-timing-function:linear;/*指定動畫以什麼速度完成播放
360     linear     動畫從頭至尾的速度是相同的。     
361     ease     默認。動畫以低速開始，而後加快，在結束前變慢。     
362     ease-in     動畫以低速開始。     
363     ease-out     動畫以低速結束。     
364     ease-in-out     動畫以低速開始和結束。     
365     cubic-bezier(n,n,n,n)     在 cubic-bezier 函數中本身的值。可能的值是從 0 到 1 的數值。*/
366 
367     -webkit-animation-delay:2s;/*指定動畫延遲幾秒後開始*/
368 
369     -webkit-animation-iteration-count:infinite;/*定義動畫應該播放多少次。
370      n     一個數字，定義應該播放多少次動畫 
371      infinite     指定動畫應該播放無限次（永遠）*/
372 
373     -webkit-animation-direction:alternate;/*定義是否循環交替反向播放動畫,
374     normal默認值,.動畫按正常播放。reverse動畫反向播放。alternate動畫在奇數次（一、三、5...）正向播放，在偶數次（二、四、6...）反向播放。
375     alternate-reverse動畫在奇數次（一、三、5...）反向播放，在偶數次（二、四、6...）正向播放。
376     initial     設置該屬性爲它的默認值。     
377     inherit     從父元素繼承該屬性。*/
378     
379     -webkit-animation-play-state:running;/*指定動畫是否正在運行或已暫停,paused指定暫停動畫,running指定正在運行的動畫*/
380 
381 
382     /*簡寫形式
383     div
384        {
385          animation: myfirst 5s linear 2s infinite alternate;
386          /* Safari and Chrome: */
387         /*
388         -webkit-animation: myfirst 5s linear 2s infinite alternate;
389        } */
390 }
391 /*css3多列*/
392 div{
393     /*column-rule: column-rule-width column-rule-style column-rule-color;*/
394     -moz-column-rule:2px outset #fff;/*指定列之間的規則：寬度，樣式和顏色*/
395     -webkit-column-rule:2px outset #fff;
396     column-rule:2px outset #fff;
397 
398     -moz-column-gap:20px;/*指定列之間差距*/
399     -webkit-column-gap:20px;
400     column-gap:20px;
401 
402     -moz-column-count:3;/*指定列的數量*/
403     -webkit-column-count:3;
404     column-count:3;
405 }
406 
407 /*用戶界面*/
408 
409 div{
410     border:1px solid #ccc;
411     padding:10px 40px;
412     width: 300px;
413     resize:both;/*resize屬性指定一個元素是否應該由用戶去調整大小。*/
414     overflow:auto;
415 
416 }
417 /*調整方框大小box-sizing*/
418 div.container{
419     width:30em;
420     border:1em solid;
421 
422 }
423 div.box{
424     box-sizing:border-box;
425     -moz-border-sizing:border-box;/*box-sizing 屬性容許您以確切的方式定義適應某個區域的具體內容*/
426     width:50%;
427     border:1em solid #ccc;
428     float:left;
429 
430 }
431 /*外形修飾outline-offset*/
432 div{
433     width:200px;
434     height:70px;
435     margin:150px;
436     padding:10px;
437     border:1px solid #ccc;
438     outline:2px solid red;
439     outline-offset:15px;/*規定邊框邊緣以外 15 像素處的輪廓*/
440 
441 }