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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/69750.html
標籤：Html/Css
上一篇：學習CSS之用CSS實作時鐘效果
下一篇：css常用元素通用樣式表