一、阴影
box-shadow: 水平偏移量、垂直偏移量、模糊程度、模糊半径、阴影的颜色、位置 box-shadow:支持多组阴影效果外部阴影的outset不需要书写 text-shadow：x轴偏移量、y轴偏移量、模糊程度、颜色 执行代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } p { font-size: 30px; letter-spacing: 20px; /* 文本阴影 */ text-shadow: 2px 5px 5px red; } </style> </head> <body> <p> 近日，黑龙江鸡西市发生一起因家庭聚餐食用“酸汤子”（酵米面食品）引发的食物中毒事件，9人食用后全部死亡。19日，公众号“健康中国”发布国家卫健委提示：①夏秋季节制作发酵米面制品容易被椰毒假单胞菌污染，该菌能产生致命的米酵菌酸。高温煮沸不能破坏毒性，中毒后没有特效救治药物，病死率达50%以上。②北方的臭碴子、酸汤子、格格豆，南方的发酵后制作的汤圆、吊浆粑、河粉等最容易致病。③为保证生命安全，最好的预防措施是不制作、不食用酵米面类食品。 </p> </body> </html>结果：
二、背景 背景起源与背景裁剪请看详解 2.1 背景起源
background-origin：背景起源 背景从什么位置开始渲染
属性值：
padding-box: 从内边距开始渲染（默认值） border-box： 从边框开始渲染 content-box: 内容区域开始渲染执行代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } div { width: 560px; height: 300px; border: 20px solid rgba(0, 0, 0, .5); padding: 50px; margin: 50px auto; background-color: pink; background-image: url('./imgs/0.jpg'); background-repeat: no-repeat; /* 从内边距开始渲染 */ background-origin: padding-box; /* 从内容盒开始渲染 */ background-origin: content-box; /* 从边框开始渲染 */ background-origin: border-box; /* background-origin 控制背景图片的渲染位置，但不能控制背景颜色，背景颜色从border-box */ } </style> </head> <body> <div class="box"></div> </body> </html>结果：
注意：background-origin 控制背景图片的渲染位置，但不能控制背景颜色，背景颜色从border-box
2.2 背景裁剪
background-clip: 控制背景在哪里开始显示
属性值：
padding-box: 从内边距开始显示 border-box： 从边框开始显示（默认值） content-box: 内容区域开始显示 text： 文字部分显示2.3 浏览器新特性的使用
格式： 前缀-属性名
谷歌浏览器和苹果浏览器： -webkit-属性名火狐浏览器： -moz-属性名欧朋浏览器： -o-属性名IE浏览器： -ms-属性名执行代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } div { font-size: 40px; background-image: url(./imgs/1.jpg); color: rgba(0, 0, 0, .3); background-origin: border-box; background-clip: text; -webkit-background-clip: text; -moz-background-clip: text; -o-background-clip: text; -ms-background-clip: text; } </style> </head> <body> <div> 此外，财富涨幅最大的是新上市公司稳健医疗的李建全家族，财富上涨了956%，以380亿元成为科创板首富；其他涨幅较大的还包括在线教育平台跟谁学的陈向东，增长了662%，房产交易平台贝壳的左晖，增长了483%。 据了解，胡润百富榜人数比去年的1819人增加579人，达到2398位企业家财富超过20亿。胡润表示：“中国上榜企业家人数增加到2398人，创下历史新高。” 上榜企业家总财富比去年的17.9万亿增长54%，达到27.5万亿。胡润表示：“这一年是历史上财富创造最快的一年，中国上榜企业家的总财富都超过了世界第四大经济体德国一年的GDP。” 千亿级企业家比去年的19人骤增一倍，达41人。胡润表示：“今年我们找到41位千亿级企业家，十年前一个都没有。有近2400位企业家财富超过20亿，实际上应该还要多，多多少？最起码多一倍，因为有些企业家比较低调，实际中国应该有7000多人财富都超过20亿。” </div> </body> </html>结果：
2.4 多背景
背景图片支持多张图片
注意事项：将小图放在前面，最大的背景图放在最后，如果多张背景图出现了重叠现象，显示的是前面的图片
执行代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { overflow: hidden; } .box { width: 100%; height: 650px; border: 1px solid #000; background-image: url('./imgs/1.png'), url('./imgs/1.jpg'), url('./imgs/bg.jpg'); background-repeat: no-repeat; background-position: 0 0, right top, center; } </style> </head> <body> <div class="box"></div> </body> </html>结果：
2.5 渐变色
线性渐变：linear-gradient
径向渐变：radial-gradient
使用必须是background-image，渐变色属于图片属性值
线性渐变：linear-gradient（方向，颜色）
方向： 可以使用关键字、可以角度
颜色： 多种颜色之间使用逗号分隔，最少为两种颜色。可以设置颜色从哪个位置开始，可以在颜色的后面添加百分比。
径向渐变:radial-gradient（设置图形及圆心所在的位置，颜色）
设置图形和圆心的位置： 位置由方向确定，图形 circle:圆形 ellipse：椭圆
线性渐变执行代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { height: 400px; border: 1px solid #000; /* 线性渐变色 */ /* 直接书写颜色：从上往下 */ /* background-image: linear-gradient(red, yellow); */ /* 设置方向:角度设置 0deg 从左下角垂直向上 */ /* background-image: linear-gradient(135deg, red, yellow); */ /* 通过关键字设置 */ background-image: linear-gradient(to right top, red, yellow); /* background-image: linear-gradient(to right top, red 30%, yellow 70%); */ /* background-image: linear-gradient(to right, red 0%, blue 30%, orange 70%, green 90%); */ } </style> </head> <body> <div class="box"></div> </body> </html>结果：
径向渐变执行代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { width: 400px; height: 400px; border: 1px solid #000; margin: 100px auto; background-image: radial-gradient(red, yellow); background-image: radial-gradient(red,blue, pink, yellow); background-image: radial-gradient( circle at right bottom, red,blue, pink, yellow); background-image: radial-gradient( circle at center, red,blue, pink, yellow); background-image: radial-gradient( ellipse at center bottom, red,blue, pink, yellow); } </style> </head> <body> <div class="box"></div> </body> </html>结果：
三、2D的动画
缩放、旋转、倾斜、偏移
属性名: transform （变形）
属性值：
缩放： scale旋转：rotate倾斜： skew偏移： translate2D分为x轴和y轴，3D分为x轴、y轴和z轴。
缩放：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { width: 560px; height: 300px; border: 1px solid #000; margin: 100px; float: left; } .box:nth-child(1):hover { /* 2D动画属性名为：transform */ /* scale() x和y轴都变化 */ transform: scale(.5); /* x轴发生变化 */ transform: scaleX(1.2); /* y轴发生变化 */ transform: scaleY(.8); } </style> </head> <body> <div class="box"><img src="./imgs/1.jpg" alt="" srcset=""></div> <div class="box"><img src="./imgs/2.jpg" alt="" srcset=""></div> <div class="box"><img src="./imgs/3.jpg" alt="" srcset=""></div> <div class="box"><img src="./imgs/4.jpg" alt="" srcset=""></div> </body> </html>结果：
rotate：
.box:nth-child(2):hover { /* 沿z轴旋转 */ transform: rotate(45deg); /* 沿x轴旋转 */ /* transform: rotateX(45deg); */ /* 沿y轴旋转 */ /* transform: rotateY(45deg); */ /* 沿z轴旋转 */ /* transform: rotateZ(45deg); */ }结果：
太极实例：
skew:
.box:nth-child(3):hover { /* 倾斜 */ transform: skew(30deg, 30deg); /* 沿x轴倾斜 */ transform: skewX(30deg); /* 沿y轴倾斜 */ transform: skewY(30deg); /* 一个值代表的是x轴 */ transform: skew(30deg); /* 第一个值代表x轴，第二个值代表y轴 */ transform: skew(30deg, 30deg); }结果：
translate:
.box:nth-child(4):hover { /* 偏移 */ /* 一个值： x轴 */ transform: translate(100px); /* 二个值: 第一个值代表x， 第二个值代表y */ transform: translate(100px, 200px); /* 沿x轴偏移 */ transform: translateX(100px); /* 沿y轴偏移 */ transform: translateY(-50%); /* translate中的偏移，百分比单位是针对于自身元素而言的，x相对于宽度， y相对于高度 */ /* transform: translateZ(100px); */ }结果：
定位居中（面试题）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .parent { width: 600px; height: 400px; margin: 100px auto; background-color: orange; position: relative; } .sun { width: 300px; height: 350px; background-color: pink; position: absolute; /* 定位设置为父相子绝 */ /* 定位的百分比针对的是父元素 */ left: 50%; top: 50%; /* 偏移的百分比针对的是自己本身 */ /* transform: translateX(-50%) translateY(-50%); */ transform: translate(-50%, -50%); } </style> </head> <body> <div class="parent"> <div class="sun"></div> </div> </body> </html>结果：
四、过渡
元素从一个状态瞬间到达另一个状态称之为“干蹦效果”，元素从一个状态经过一段时间到达另一个状态称之为“动画效果”。
过渡： transition
transition-property： 过渡属性 all所有属性 必需属性 （property 属性）transition-duration: 过渡时间transition-timing-function： 过渡的速度曲线 支持贝塞尔曲线transition-delay: 过渡的延迟时间注意： 过渡并不是能应用到所有的属性上，有些属性不支持过渡，比如背景颜色，一般属性值为数值类型的都支持过渡。
五、动画
调用动画：animation
animation-name: 动画的名字animation-duration：动画的时间animation-timing-function： 动画的速度曲线animation-delay： 动画延迟时间animation-iteration-count: 动画的执行此处 infinite 无限循环 n为具体的次数animation-direction: 动画的方向 alternate 反向执行动画animation-fill-mode： forwards 可以保留动画最后一帧的状态六、css3动画实现轮播图
