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 擢摩一下改 于教室