css3和css有什么區(qū)別？簡(jiǎn)單來講css3是css（層疊樣式表）技術(shù)的升級(jí)版本，css3新特征有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實(shí)現(xiàn)透明效果、漸變效果、使用@Font-Face實(shí)現(xiàn)定制字體、多背景圖、文字或圖像的變形處理（旋轉(zhuǎn)、縮放、傾斜、移動(dòng)）、多欄布局、媒體查詢等。css主要能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。
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;/*順時(shí)針*/ 17 border-radius: 1px 10px 30px;/*對(duì)角線*/ 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偏移 陰影模糊值 陰影往外延伸 陰影顏色 內(nèi)陰影*/ 25 #ceshi{ 26 box-shadow: 10px 20px 30px 10px red; 27 } 28 29 /* border-image:url('') X y round/repeat/stretch 30 邊框圖片環(huán)繞/平鋪/拉伸 */ 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;/*邊框區(qū)域*/ 54 background-origin: padding-box;/*內(nèi)邊框區(qū)域*/ 55 background-origin: content-box;/*有效區(qū)域*/ 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('音樂不能阻礙工作，是為了更好的服務(wù)工作') 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>海が水にとって困難だったら武山は雲(yún)ではないことを除いてあなたは私にとって海と武山です</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>
聯(lián)系客服
