css3和css有什麼區別？簡單來講css3是css的升級版本，css3新增樣式有圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現透明效果、漸變效果、使用@Font-Face實現定製字體、多背景圖、文字或圖像的變形處理（旋轉、縮放、傾斜、移動）、多欄佈局、媒體查詢等。下麵是該節總結練習：邊框... ...
css3和css有什麼區別？簡單來講css3是css（層疊樣式表）技術的升級版本，css3新特征有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現透明效果、漸變效果、使用@Font-Face實現定製字體、多背景圖、文字或圖像的變形處理（旋轉、縮放、傾斜、移動）、多欄佈局、媒體查詢等。css主要能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字型大小樣式，擁有對網頁對象和模型樣式編輯的能力。
邊框border-radius:邊框圓角,值為圓的直徑；border-image:url('') x y round/repeat/stretch 實現邊框圖片環繞/平鋪/拉伸，註意設置border:30px solid transparent；背景圖background-size的比例乘容器設置盒子大小為背景圖大小,通過background-origin調整背景圖大小和位置；陰影通過box-shadow:x偏移 y偏移 陰影模糊值 陰影外延值 陰影的顏色 內陰影；文本陰影通過text-shadow: x y 偏移 顏色；如何實現自定義字體，通過@font-face提前將字體引入，有效避免用戶電腦因為沒有這款字體而文字變形；word-break: break-all;與word-wrap: break-word的區別在於,前者是單詞折行,下麵是代碼展示部分:1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>css3新增邊框、陰影、背景、文本、字體</title> 7 <style type="text/css"> 8 /*border-radius:邊框圓角 圓角直徑*/ 9 div#ceshi{ 10 width: 200px; 11 height: 200px; 12 background-color: #f90; 13 margin-bottom: 50px; 14 /* border-radius: 50%; 15 border-radius: 200px; */ 16 border-radius: 1px 10px 30px 70px;/*順時針*/ 17 border-radius: 1px 10px 30px;/*對角線*/ 18 border-radius: 1px 10px; 19 border-radius: 10px; 20 } 21 22 /*#ceshi{ 23 box-shadow: 10px 20px 30px 10px purple inset; 24 }*//*X偏移 Y偏移 陰影模糊值 陰影往外延伸 陰影顏色 內陰影*/ 25 #ceshi{ 26 box-shadow: 10px 20px 30px 10px red; 27 } 28 29 /* border-image:url('') X y round/repeat/stretch 30 邊框圖片環繞/平鋪/拉伸 */ 31 div.box{ 32 width: 128px; 33 height: 128px; 34 background-color: #ccc; 35 margin: 0 auto; 36 border:30px solid transparent; 37 /* border-image:url('images/b.png') 20 20 round; */ 38 border-image-source:url('images/b.png'); 39 border-image-slice: 20; 40 border-image-width: 10; 41 border-image-outset:1; 42 border-image-repeat:round; 43 margin-bottom: 100px; 44 } 45 46 /*背景樣式background-size*//*background-origin背景圖大小和位置*/ 47 .pic{ 48 width: 400px; 49 height: 300px; 50 border: 10px solid red; 51 background: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1314383665,2282288429&fm=11&gp=0.jpg) no-repeat; 52 background-size: 50%;/*容器寬度乘百分比為背景圖大小*/ 53 background-origin: border-box;/*邊框區域*/ 54 background-origin: padding-box;/*內邊框區域*/ 55 background-origin: content-box;/*有效區域*/ 56 } 57 58 /*文本字體*/ 59 .text{ 60 text-shadow: 5px 1px 2px red;/*文本陰影*/ 61 width: 400px; 62 border: 1px inset green; 63 margin-top: 50px; 64 word-break: break-all;/*單詞折行*/ 65 word-wrap: break-word; 66 font-family: dhnblog; 67 } 68 69 /*自定義字體類型*/ 70 @font-face{ 71 font-family:dhnblog; 72 src:url('images/fzm.ttf'); 73 } 74 </style> 75 <script> 76 window.onload=function(){ 77 var obj=document.getElementById('ceshi') 78 obj.onclick=function(){ 79 console.log('音樂不能阻礙工作，是為了更好的服務工作') 80 } 81 } 82 </script> 83 </head> 84 <body> 85 <div id="ceshi"></div> 86 <div class="box"> 87 <img src="images/ft.png" alt=""> 88 </div> 89 <div class="pic"> 90 今日の天気は良い今日の天気は良い今日の天気は良い今日の天気は良い 91 </div> 92 <div class="text"> 93 <p>Once the sea was difficult for the waterExcept Wushan is not a cloudYou are to me the sea and Wushan 94 </p> 95 <p>海が水にとって困難だったら武山は雲ではないことを除いてあなたは私にとって海と武山です</p> 96 <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> 97 <p>Maybe program apes are not good at words, and warmth is hidden in the cold and the heat inside, but those seemingly cold codes can also be combined into the most romantic and beautiful love words. Today we take a look at how programmers put love words into romance. Code.</p> 98 </div> 99 </body> 100 </html>
