css3相較於css2.1增加了許多新的特性功能，目前主流瀏覽器chrome、safari、firefox、opera、甚至360都已經支持了CSS3大部分功能了，IE10以後也開始全面支持CSS3了，需要註意的是css3樣式在不同的瀏覽器可能需要不同的首碼（是瀏覽器的私有屬性，相容性），此外在代碼... ...
CSS3是CSS2的升級版本，3只是版本號，它在CSS2.1的基礎上增加了很多強大的新功能。 目前主流瀏覽器chrome、safari、firefox、opera、甚至360都已經支持了CSS3大部分功能了，IE10以後也開始全面支持CSS3了。在編寫CSS3樣式時，不同的瀏覽器可能需要不同的首碼。它表示該CSS屬性或規則尚未成為W3C標準的一部分，是瀏覽器的私有屬性，雖然目前較新版本的瀏覽器都是不需要首碼的，但為了更好的向前相容首碼還是少不了的(代碼展示css3瀏覽器首碼)
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>css3瀏覽器首碼</title> 8 <style type="text/css"> 9 table{ 10 border: 1px solid #ccc; 11 border-spacing:50px;/*表格邊框之間的距離*/ 12 border-collapse: collapse;/*表格邊框是否合併*/ 13 } 14 tr,td,th{ 15 border: 1px solid #CCCCCC; 16 text-align: center; 17 padding: 5px; 18 } 19 </style> 20 </head> 21 <body> 22 <table> 23 <tr> 24 <th>首碼</th> 25 <th>瀏覽器</th> 26 </tr> 27 <tr> 28 <td>-webkit</td> 29 <td>chrome和safari</td> 30 </tr> 31 <tr> 32 <td>-moz</td> 33 <td>firefox</td> 34 </tr> 35 <tr> 36 <td>-ms</td> 37 <td>IE</td> 38 </tr> 39 <tr> 40 <td>-o</td> 41 <td>opera</td> 42 </tr> 43 </table> 44 </body> 45 </html>
CSS3實現的文字特效代碼，修改參數觀察變化
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>CSS3實現的文字特效</title> 8 <style type="text/css"> 9 body{ 10 background:#000; 11 } 12 h1 { 13 text-align:center; 14 color:#fff; 15 font-size:48px; 16 font-family: 'Fruktur', cursive; 17 text-shadow: 1px 1px 1px #ccc, 18 0 0 10px #fff, 19 0 0 20px #fff, 20 0 0 30px #fff, 21 0 0 40px #ff00de, 22 0 0 70px #ff00de, 23 0 0 80px #ff00de, 24 0 0 100px #ff00de, 25 0 0 150px #ff00de; 26 27 transform-style: preserve-3d; 28 -moz-transform-style: preserve-3d; 29 -webkit-transform-style: preserve-3d; 30 -ms-transform-style: preserve-3d; 31 -o-transform-style: preserve-3d; 32 33 34 animation: run ease-in-out 9s infinite; 35 -moz-animation: run ease-in-out 9s infinite ; 36 -webkit-animation: run ease-in-out 9s infinite; 37 -ms-animation: run ease-in-out 9s infinite; 38 39 -o-animation: run ease-in-out 9s infinite; 40 } 41 42 @keyframes run { 43 0% { 44 transform:rotateX(-5deg) rotateY(0); 45 } 46 50% { 47 transform:rotateX(0) rotateY(180deg); 48 text-shadow: 1px 1px 1px #ccc, 49 0 0 10px #fff, 50 0 0 20px #fff, 51 0 0 30px #fff, 52 0 0 40px #3EFF3E, 53 0 0 70px #3EFFff, 54 0 0 80px #3EFFff, 55 0 0 100px #3EFFee, 56 0 0 150px #3EFFee; 57 58 } 59 100% { 60 transform:rotateX(5deg) rotateY(360deg); 61 } 62 } 63 64 @-moz-keyframes run { 65 0% { 66 -moz-transform:rotateX(-5deg) rotateY(0); 67 68 } 69 50% { 70 -moz-transform:rotateX(0) rotateY(180deg); 71 text-shadow: 1px 1px 1px #ccc, 72 0 0 10px #fff, 73 0 0 20px #fff, 74 0 0 30px #fff, 75 0 0 40px #3EFF3E, 76 0 0 70px #3EFFff, 77 0 0 80px #3EFFff, 78 0 0 100px #3EFFee, 79 0 0 150px #3EFFee; 80 } 81 100% { 82 -moz-transform:rotateX(5deg) rotateY(360deg); 83 } 84 } 85 86 @-webkit-keyframes run { 87 0% { 88 -webkit-transform:rotateX(-5deg) rotateY(0); 89 90 } 91 50% { 92 -webkit-transform:rotateX(0) rotateY(180deg); 93 text-shadow: 1px 1px 1px #ccc, 94 0 0 10px #fff, 95 0 0 20px #fff, 96 0 0 30px #fff, 97 0 0 40px #3EFF3E, 98 0 0 70px #3EFFff, 99 0 0 80px #3EFFff, 100 0 0 100px #3EFFee, 101 0 0 150px #3EFFee; 102 103 } 104 100% { 105 -webkit-transform:rotateX(5deg) rotateY(360deg); 106 } 107 } 108 @-ms-keyframes run { 109 0% { 110 -ms-transform:rotateX(-5deg) rotateY(0); 111 112 } 113 50% { 114 -ms-transform:rotateX(0) rotateY(180deg); 115 116 } 117 100% { 118 -ms-transform:rotateX(5deg) rotateY(360deg); 119 } 120 } 121 </style> 122 </head> 123 <body> 124 <h1>學習源於興趣和壓力,不拋棄不放棄</h1> 125 </body> 126 </html>
