一：阴影：
阴影分为：文本阴影和盒子阴影。
1.1文本阴影：text-shadow:
语法： text-shadow：水平偏移 垂直偏移 羽化大小 颜色，
解释： 水平、垂直是可以为负值，如果为负值的话，就是会造成 左上和左边有阴影。
水平偏移和垂直偏移都不写的话，就四边都存在阴影。
1.2盒子阴影：
语法：box-shadow:边框阴影
none： 无阴影
：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
：如果前面两个都为0 的话，四周都会有阴影。
：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
：如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
：设置对象的阴影的颜色。
inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
二、背景：
含义：在css2中已经有background属性了，用于设置盒子的背景相关的一些样式，在CSS3中新增加了几个背景相关的几个属性。
|
Background-image |
在盒子里添加背景照片 |
|
Background-repeat |
图片平铺样式 |
|
background-repeat: repeat |
水平垂直都平铺,默认值 |
|
background-repeat: repeat-x |
水平平铺 |
|
background-repeat: repeat-y |
垂直平铺 |
|
background-repeat: none |
不平铺 |
|
background-clip: border-box |
背景图片的覆盖区域边框+padding+content |
|
background-clip: padding-box |
padding+content |
|
background-clip: content |
content |
|
background-origin: padding-box |
背景图片显示的原点位置padding |
|
background-origin: border-box |
背景图片显示的原点位置border |
|
background-origin: content-box |
背景图片显示的原点位置content |
|
background-size |
设置背景图片的大小 |
|
background-size: auto auto; |
显示默认照片的大小,原始的宽高比 |
|
background-size: 100% 100% |
实际需要设置具体数值的百分百比 |
|
background-size: cover |
全部盖住容器(可能在水平或者垂直方向出现图片显示不完整 |
|
background-size: contain |
一定显示完整,(容器的水平或垂直会出现留白) |
|
background-position |
相对于容器定位 |
|
background-position: 0 0; |
默认 |
|
background-position: -20px 0 |
上-,下+,左-,右+ |
|
background-position: right top |
设置left,right,top,bottom |
|
background-position: center center; |
图片的中心点和盒子的中心点重合 |
|
background-position: 50% 50% |
容器的宽高减去图片的宽高之差的百分比 居中 |
2.1、用户设置图片的尺寸大小。 具体在pc端中详细介绍。
2.2.1：失真情况
1 //注意：这两种设置方式会导致图片失真。 2 //background-size:设置背景图片的大小/ 3 background-size: 600px 400px;
2.2.2：百分比相对于盒子的宽度和高度（不失真，等比例缩放）
1 background-size: 100% 100%;
2.2.3：进行设置等比例缩放，但是会留白
/containe保证等比例缩放,但是会出现留白/
background-size: contain;
2.2.4：设置等比例缩放，并且不会留白。但是会造成有些内容显示不出来
1 /cover保证等比例缩放,并且不会留白，但是出现有一部分图片不显示/ 2 background-size: cover;
2.2、设置背景区域的大小
1 设置背景区域的大小 2 3 /盒子的背景区域是整个盒子，包括边框和padding/ 4 /默认值，设置背景区域包括了边框/ 5 background-clip: border-box; 6 7 /背景区域只包含padding和content/ 8 background-clip: padding-box; 9 10 /背景区域只包含content/ 11 background-clip: content-box; 12 【演示：03-background-clip.html】
2.3：设置背景图片原点的位置：
1 设置背景图片的原点的位置，默认是padding的地方开始 2 3 background-image: url(images/bg.jpg); 4 /设置原点从border开始/ 5 background-origin: border-box; 6 7 /设置原点从padding开始,默认值/ 8 background-origin: padding-box; 9 10 /设置原点从content开始/ 11 background-origin: content-box; 12 【演示：04-background-origin.html】
2.4、多重背景设置：
1 background设置背景的时候，可以设置多个背景图片，使用逗号隔开。注意颜色只能设置一次，并且通常来说，颜色都是在最后面进行设置。 2 3 background是一个合写的属性，如果在background之前设置了background相关的样式，会被覆盖掉。 4 5 background: url(images/mn1.jpg) no-repeat top left, url(“images/mn2.jpg”) no-repeat right bottom, pink; 6 【多重背景-语法.html】 7 8 【多重背景-小泡泡.html】 9 10 【多重背景的应用.html】
2.4、背景图片设置边框
2.4.1：对图片的四个角向内进行剪载，然后round 是把两个角之间的内容进行拉伸。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 #id{ 8 width: 400px; 9 height: 400px; 10 margin:100px auto; 11 border: 30px solid #000; 12 //26 = 图片的宽度 除于四 等于每一个角的位置 13 // round平铺 ，就是把除了四个角的的其他两角之间的内容进行平铺 14 border-image: url(./img/borderimage.png) 26 round; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="id"></div> 20 <div id="id1"> 21 22 </div> 23 </body> 24 </html> 25
2.4.2：对图片的四个角向内进行剪载，然后stretch是把两个角之间的内容进行平铺。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 #id1{ 8 width: 400px; 9 height: 400px; 10 margin:100px auto; 11 /* box-shadow: 0 0 10px #000; */ 12 border: 50px solid #000; 13 /* border-image: url(./images/border.png) 26 round; */ 14 //26 就是图片除于4个角 15 //stretch 把内容进行拉伸。 16 border-image: url(./img/border.png) 26 stretch; 17 } 18 </style> 19 </head> 20 <body> 21 <div id = 'id1'></div> 22 </body> 23 </html> 24
2.4.3 /* 后面的 100px 是把 boder的宽度给改了 */
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 #id{ 8 width: 400px; 9 height: 400px; 10 margin:100px auto; 11 border: 50px solid #000; 12 /* 后面的 100px 是把 boder的宽度给改了 */ 13 border-image: url(./img/border.png) 18 /100px round; 14 15 } 16 17 </style> 18 </head> 19 <body> 20 <div id="id"> 21 22 </div> 23 </body> 24 </html>
2.4.4：fill 作用将中间部分作为背景
三、渐变
3.1线性渐变
1 linear-gradient指沿着某条直线朝一个方向产生的渐变效果。 2 3 //注意：渐变实际上相当与一张图片，因为需要加给background-image才会生效 4 //渐变的两个要求：有区间，有颜色变化。 5 //最简单的渐变 6 background-image: linear-gradient(red, green); 7 //设定渐变的方向 8 background-image: linear-gradient(to right, red, green); 9 //也可以设定渐变的角度 deg 是角度的意思 10 background-image: linear-gradient(45deg, red, green); 11 //设定渐变的范围 12 background-image: linear-gradient(to right, red 20%, green 80%) 13 //每一个区间表示渐变颜色的范围 14 background-image: linear-gradient(to right, red 20%, green 20%)
3.2径向渐变
1 radial-gradient指从一个中心点开始沿着四周产生渐变效果 2 3 /1. 最简单的渐变/ 4 background-image: radial-gradient(red, green); 5 6 /2. 指定圆的半径和圆心/ 7 background-image: radial-gradient(200px at center, red, green); 8 9 /3. 指定椭圆/ 10 background-image: radial-gradient(200px 80px at center, red, green); 11 12 /4. 指定范围/ 13 background-image: radial-gradient(200px at center, green 50%, red 50%);
1 background: radial-gradient(green,blue); 2 /* 不随着div进行变化 */ 3 /* background: radial-gradient(circle,green,blue); */ 4 /* 随着div的变化进行变化 */ 5 /* background: radial-gradient(ellipse,green,blue); */ 6 }
3.3、重复渐变色：
重复渐变色分为：重复线性渐变色和重复径向渐变色
3.3.1重复线性渐变色
1 background: repeating-linear-gradient(red 10%, yellow 20%);
//90度 2background: repeating-linear-gradient(90deg, red 10%, yellow 20%);
3background: repeating-linear-gradient(to left, red 10%, yellow 20%); 4
3.3.2重复径向渐变
2 /*background: repeating-radial-gradient(red 10%, blue 20%); */ 3 background: repeating-radial-gradient(circle,red 10%, blue 20%); //不随着div的变化而变化 4 /* background: repeating-radial-gradient(ellipse, red 10%, blue 20%); */ 随着div的变化 进行变化 5 ·
四、css过度动画 必须是值的变化。
1 css过度动画 2 transition:2s linear all; 3 定义过度属性 4 transition-property: all 或 属性名,属性名 5 定义过度时间 6 transition-duration: 2s 7 延迟多少时间开始 8 transition-delay: 2s 9 transition-timing-function: 10 linear 匀速 ease 慢快慢 11 ease-in 慢开始 ease-out 慢结束 12 ease-in-out 慢开始慢结束 13 cubic-bezier(0.4,1.8,0.4,0.5) 自定义贝兹尔曲线
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 #id{ 8 width: 100px; 9 height: 100px; 10 border: 1px solid #FFA500; 11 /* 动的过程中2s */ 12 /* transition: 2s;*/ 13 /* 第二个2s是延迟 */ 14 /* transition: 2s 2s; */ 15 /* 第三个参数是 可以变大变小 16 cubic-bezier(0.4,1.8,0.4,0.5) 自定义贝兹尔曲线 17 */ 18 transition: 2s 2s cubic-bezier(0.4, 1.8, 0.4, 0.5); 19 background: #FF0000; 20 } 21 /* 颜色是否可以进性改变 数值之间的变化*/ 22 #id:hover{ 23 /* height: 300px; 24 width: 300px; */ 25 /* opacity: 0; /* 便没有*/ */ 26 background: #FFFF00; 27 } 28 </style> 29 </head> 30 <body> 31 <div id="id"> 32 33 </div> 34 </body> 35 </html>
五、2D
1 transform: 2D 转换 2 1.translate( 20px,10px ) 移动 3 元素从其当前位置移动，根据给定的left（x 坐标） 和 top（y 坐标） 位置参数 4 自身位移，可以实现垂直水平居中 5 2. rotate( 60deg ) 旋转 6 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。 7 3.transform-origin 改变旋转原点 8 第一个参数 x轴方向 left、center、right 或者具体像素 9 第二个参数 Y轴方向 top、center、bottom 或者具体像素 10 4.scale( .8,.8 ) 缩放 11 元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数 12 skew( -15deg,0deg ) 倾斜 13 元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数 14 可以同写用空格隔开 15 transform:rotate(15deg) scale(0.5,0.5) translate(200px,0);
案例：
5.1，2，3 移动实现居中‘
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 /* 2D 做运动 */ 8 #id{ 9 width: 500px; 10 height: 500px; 11 border: 1px solid #000000; 12 position: relative; 13 } 14 #id1{ 15 width: 100px; 16 height: 100px; 17 border: 1px solid #000000; 18 position: absolute; 19 left: 50%; 20 top: 50%; 21 transform: translate(-50%,-50%); 22 } 23 </style> 24 </head> 25 <body> 26 <div id="id"> 27 <div id="id1"> 28 29 </div> 30 </div> 31 </body> 32 </html>
5.3旋转和改变旋转的中心
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 #id{ 8 width: 200px; 9 height: 300px; 10 border: 1px solid #000000; 11 margin: 100px auto; 12 overflow: hidden; 13 } 14 #id1{ 15 width: 200px; 16 height: 300px; 17 border: 1px solid #000000; 18 /* margin: 100px auto; */ 19 /* 动画三秒 */ 20 transition: 3s; 21 /* 以中心进行旋转 */ 22 /* transform-origin: center center; */ 23 transform-origin: left top; 24 } 25 #id1:hover{ 26 transform: rotate(90deg); 27 } 28 </style> 29 </head> 30 <body> 31 <div id="id"> 32 <div id="id1"> 33 34 </div> 35 </div> 36 </body> 37 </html>
5.4缩放
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 div{ 8 width: 200px; 9 height: 200px; 10 border: 1px solid #000; 11 margin:100px auto; 12 transition: 3s; 13 /* transform-origin:center center; 14 transform-origin:left top; */ 15 } 16 div:hover{ 17 /* transform: scale(3, 3); */ 18 /* transform: skew(30deg, 0); */ 19 /* transform: skew(0, 30deg); */ 20 transform: skew(60deg, 30deg); 21 } 22 </style> 23 </head> 24 <body> 25 <div> 26 27 </div> 28 </body> 29 </html>
5.5综合适用
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 div{ 8 width: 200px; 9 height: 200px; 10 border: 1px solid #000; 11 margin-top:100px; 12 transition: 3s; 13 /* transform-origin:center center; 14 transform-origin:left top; */ 15 } 16 div:hover{ 17 transform: translate(900px,0) rotate(180deg) skew(30deg, 30deg); 18 } 19 </style> 20 </head> 21 <body> 22 <div> 23 24 </div> 25 </body> 26 </html>