目錄 1、徑向漸變 2、 線性漸變 3、 背景圖片裁剪 4、 背景圖片大小 5、 邊框圖片 6、 邊框圓角 7、 邊框陰影 8、位移 9、 傾斜 10、 旋轉 11、 縮放 12、 文本換行 13、 文本溢出 1、徑向漸變 8、位移 2018-07-10 20:26:02 擢摩一下改 於教室 ...
1、徑向漸變
2、 線性漸變
3、 背景圖片裁剪
4、 背景圖片大小
5、 邊框圖片
6、 邊框圓角
7、 邊框陰影
8、位移
9、 傾斜
10、 旋轉
11、 縮放
12、 文本換行
1、徑向漸變
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 p{ 8 width: 500px; 9 height: 500px; 10 border: 2px solid black; 11 12 } 13 14 p:first-child{ 15 background-image: radial-gradient(red,orange,yellow,green,cyan,blue,purple); 16 /*設置徑向漸變 沒有設置漸變方向 預設中心點開始煎餅*/ 17 } 18 19 p:nth-child(2){ 20 21 border-radius: 50%; 22 /*變成球*/ 23 background-image: radial-gradient(450px at top left,white 30%,red 70%,black 100%); 24 25 /*100px at top left 整個漸變的大小就是100px at top left將其定義到頂端 450Px漸變在450長度中產生*/ 26 27 28 background-image: radial-gradient(450px at 30px 20px,white 30%,red 70%,black 100%); 29 /*漸變從30px 20px開始 即設置他的定位點 定義圓心*/ 30 31 32 } 33 </style> 34 </head> 35 <body> 36 <p>我是徑向漸變</p> 37 <p>我是個球</p> 38 </body> 39 </html>
2、線性漸變
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ width: 200px; height: 200px; border: 1px solid red; color: #ffffff; } p:nth-child(1) { /*第一個孩子*/ background-image: linear-gradient(to bottom, red, blue); /*linear-gradient表示設置線性漸變*/ /*方向 起始的顏色 最後的顏色*/ background-image: linear-gradient(to left, red, blue); /*從右向左*/ } p:nth-child(2){ background-image: linear-gradient(90deg,red 0,yellow 45%,green 80%,purple 100%); /*0是從底部往上 180是從上往下 90度是左邊 270度右邊 360度底部*/ /*左邊是0% 到405%的地方是黃色到下一個是黃色的過渡階段*/ } </style> </head> <body> <p> 我是線性漸變 </p> <p>我是線性漸變</p> </body> </html>
3、背景圖片裁剪
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 600px; height: 600px; margin: 200px auto; border: 100px solid rgba(255,0,0,0.1); background-image: url(../imgs/gq1.jpg); background-repeat: no-repeat; padding: 60px; /*以下為內容裁切和內容定位*/ background-clip: border-box; /*邊框部分*/ background-origin: border-box; /*內容部分是相對於border部分開始的*/ /*兩天命令基本都是連起來用的*/ /*background-clip: padding-box;*/ /*頁邊距部分*/ /*background-origin: padding-box;*/ /*background-clip: content-box;*/ /*background-clip 把背景圖片剪裁到內容區域*/*/ /*background-origin: content-box;*/ /*設置背景圖片是相對內容來定位*/ } </style> </head> <body> <div></div> </body> </html>
4、背景圖片大小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 500px; height: 500px; border: 2px solid green; background-image: url(../imgs/gq2.jpg); margin: 200px auto; background-repeat: no-repeat; /*background-size: 400px 200px;*/ /*可以控制背景圖片的寬和高*/ background-size: cover; /*cover會覆蓋整個盒模型*/ background-size: contain; /*按照某條邊的比例去計算 選擇最大的那條邊 保證最大那條邊被覆蓋*/ } </style> </head> <body> <div> </div> </body> </html>
5、邊框圖片
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .d1{ 8 width: 600px; 9 height: 600px; 10 border:1px solid black; 11 background-color: rgb(33,200,100); 12 border-image-source: url("imag/1.png"); 13 /*切割方式1*/ 14 /*切割之後的四角*/ 15 border-image-slice: 100; 16 /*切割之後中間部分*/ 17 border-image-width: 100px; 18 /*切割後中間部分重覆*/ 19 border-image-repeat:repeat; 20 /*邊向外擴散100*/ 21 border-image-outset:100; 22 margin:300px auto; 23 24 25 } 26 27 </style> 28 </head> 29 <body> 30 <div class="d1">切割之後的四角</div> 31 32 </body> 33 </html>
6、邊框圓角
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .d1 { 8 width: 500px; 9 height: 500px; 10 background-color: yellow; 11 /*邊框變成圓*/ 12 border-radius: 50%; 13 margin:0 auto; 14 } 15 .d2 { 16 width: 500px; 17 height: 500px; 18 background-color: yellow; 19 /*順時針*/ 20 border-radius: 10px 50px 90px 180px; 21 margin:0 auto; 22 } 23 .d3 { 24 width: 500px; 25 height: 500px; 26 background-color: yellow; 27 /*只改左上圓角*/ 28 border-top-left-radius: 150px; 29 margin:0 auto; 30 } 31 </style> 32 </head> 33 <body> 34 <div class="d1">d1</div> 35 <div class="d2">d2</div> 36 <div class="d3">d3</div> 37 </body> 38 </html>
7、邊框陰影
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .a1{ 8 9 width: 500px; 10 height: 500px; 11 background-color: yellow; 12 margin:300px auto; 13 /*添加陰影*/ 14 /*可以寫正負值，（x軸偏移，y軸偏移，模糊程度，顏色）*/ 15 box-shadow: -30px -30px 50px black; 16 } 17 .a2 { 18 width: 500px; 19 height: 500px; 20 background-color: yellow; 21 margin:300px auto; 22 border-radius: 50%; 23 /*內陰影*/ 24 box-shadow:inset -50px -50px 100px black; 25 } 26 </style> 27 </head> 28 <body> 29 <article class="a1"></article> 30 <article class="a2"></article> 31 </body> 32 </html>
8、位移
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .d1{ 8 width: 400px; 9 height: 400px; 10 background-color: gold; 11 transition: 3s; 12 13 } 14 .d2{ 15 width: 400px; 16 height: 400px; 17 background-color: blue; 18 transition: 3s; 19 /*設置位移動作發生的的時間*/ 20 } 21 22 .d1:hover{ 23 transform:translate(400px,400px); 24 /*預設往右*/ 25 } 26 27 .d2:hover{ 28 transform:translate(0,400px); 29 /*預設往右*/ 30 31 transform:translateY(0,400px); 32 /*控制盒子移動方向僅為Y軸*/ 33 } 34 </style> 35 </head> 36 <body> 37 <div class="d1">我是盒子1號</div> 38 <div class="d2">我是盒子2號</div> 39 </body> 40 </html>
9、傾斜
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 500px; 9 height: 500px; 10 border: 1px solid red; 11 margin: 300px auto; 12 transition: 3s; 13 } 14 .d1:hover{ 15 transform: skew(45deg); 16 /*做變換都用transform*/ 17 background-color: red; 18 /*傾斜的中心點在中心*/ 19 } 20 .d2:hover{ 21 /*transform: skew(-45deg);*/ 22 /*transform: skew(-45deg,30deg);*/ 23 /*一個參數表示旨在x軸方向傾斜 兩個參數表示xy兩個方向傾斜相應的角度*/ 24 transform: skewY(-45deg,30deg); 25 /*加個Y表示只在y軸方向傾斜*/ 26 background-color: yellow; 27 transform-origin: left; 28 /*繞著某條邊傾斜 一般繞y軸方向的左右兩邊傾斜*/ 29 background-color: yellow; 30 } 31 32 33 </style> 34 35 36 37 <!--ps描邊效果--> 38 <!--多邊形套索工具--> 39 <!--con+j--> 40 <!--fx 添加圖層樣式 描邊為白色--> 41 <!--c+s保存成png格式--> 42 </head> 43 <body> 44 <div class="d1"></div> 45 <div class="d2"></div> 46 </body> 47 </html>
10、旋轉
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 500px; 9 height: 500px; 10 border: 2px solid red; 11 margin-bottom: 50px; 12 background-color: green; 13 margin: 150px auto; 14 } 15 /*基本樣式*/ 16 17 .d1{ 18 background-color: green; 19 transition: 3s; 20 } 21 22 .d2 { 23 background-color: yellow; 24 transition: 3s; 25 } 26 27 .d1:hover{ 28 transform: rotate(45deg); 29 /*表示旋轉度數 正值為順時針 負值為逆時針*/ 30 background-color: red; 31 } 32 33 .d2:hover{ 34 transform: rotate(-45deg); 35 /*表示旋轉度數 正值為順時針 負值為逆時針*/ 36 background-color: gold; 37 transform-origin: top right; 38 39 } 40 41 42 </style> 43 </head> 44 <body> 45 <div class="d1">我要順時針</div> 46 <div class="d2">我要逆時針繞著右上角旋轉</div> 47 </body> 48 </html>
11、縮放
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 12 div{ 13 width: 500px; 14 height: 500px; 15 border: 2px solid red; 16 margin: 500px auto; 17 } 18 19 p{ 20 width: 500px; 21 height:500px; 22 border: 2px solid blue; 23 transition: 3s; 24 /*動畫播放時長*/ 25 } 26 27 p:hover{ 28 /*transform: scale(2);*/ 29 /*一個參數預設xy兩個方向都有位移*/ 30 31 transform: scale(0.5,2); 32 /*在x軸上縮小為0.5 y軸上放大為2*/ 33 } 34 </style> 35 </head> 36 <body> 37 <div> 38 <p>我現在170，我要長到180</p> 39 </div> 40 </body> 41 </html>
12、文本換行
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 200px; 9 height: 100px; 10 border:1px solid red; 11 } 12 /*設置字母換行 */ 13 #d1{ 14 width: 200px; 15 height: 100px; 16 border:1px solid red; 17 word-break:break-all; 18 } 19 /*設置文字在空格處換行*/ 20 /*只有遇到邊框才會換行*/ 21 #d2{ 22 width: 200px; 23 height: 100px; 24 border:1px solid red; 25 word-break:keep-all; 26 } 27 </style> 28 </head> 29 <body> 30 <div> 31 我要換行我要換行我要換行我要換行我要換行 32 </div> 33 <!--沒法識別英文單詞，無法實現換行--> 34 <div> 35 hgdsygdiebndzgfstfdyuagefjwbghktyfssluhiodvssyufye 36 </div> 37 <!--英文字母換行：設置word-break--> 38 <div id="d1"> 39 hgdsygdiebndzgfstfdyuagefjwbghktyfssluhiodvssyufye 40 </div> 41 <!--文字遇到邊框在空格處換行--> 42 <div id="d2"> 43 我要換行 我要換行我要換行 我要換行我要換行我怕就要漢化我要換號 我要換行我要換行我怕就要漢化我要換號我要換行 我要換行我要換行我怕就要漢化我要換號我要換行我要換行我怕就要漢化我要換號 44 </div> 45 </body> 46 </html>
13、文本溢出
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .d0 { 8 width: 50px; 9 height: 100px; 10 border:1px solid blue; 11 /*設置文本不換行white-space*/ 12 white-space:nowrap; 13 } 14 .d1 { 15 width: 50px; 16 height: 100px; 17 border:1px solid blue; 18 /*設置文本不換行white-space*/ 19 white-space:nowrap; 20 /*溢出隱藏*/ 21 overflow: hidden; 22 } 23 .d2 { 24 width: 50px; 25 height: 100px; 26 border:1px solid blue; 27 /*設置文本不換行white-space*/ 28 white-space:nowrap; 29 /*隱藏*/ 30 overflow:auto; 31 } 32 .d3 { 33 width: 50px; 34 height: 100px; 35 border:1px solid blue; 36 /*設置文本不換行white-space*/ 37 white-space:nowrap; 38 /*隱藏*/ 39 /*裁掉後面不顯示的部分*/ 40 text-overflow: clip; 41 } 42 .d4 { 43 width: 50px; 44 height: 100px; 45 border:1px solid blue; 46 /*設置文本不換行white-space*/ 47 white-space:nowrap; 48 /*隱藏*/ 49 /*省略後面不顯示的部分*/ 50 text-overflow: ellipsis; 51 } 52 53 </style> 54 </head> 55 <body> 56 參照 57 <div class="d0">我最喜歡紅歐盟裡面的林黛玉林貝貝</div> 58 hidden 59 <div class="d1">我最喜歡紅歐盟裡面的林黛玉林貝貝</div> 60 auto 61 <div class="d2">我最喜歡紅歐盟裡面的林黛玉林貝貝</div> 62 clip 63 <div class="d3">我最喜歡紅歐盟裡面的林黛玉林貝貝</div> 64 ellipsis 65 <div class="d4">我最喜歡紅歐盟裡面的林黛玉林貝貝</div> 66 67 </body> 68 </html>
2018-07-10 20:26:02 擢摩一下改 於教室
