box-shadow属性用于增加盒模型元素的边框阴影。一共有5个参数。
第一个参数：控制阴影在水平方向的偏移。第二个参数：控制阴影在垂直方向的偏移。第三个参数：控制阴影的模糊程度。第四个参数：控制阴影的缩放程度。第五个参数：改属性值控制阴影的颜色。 <style> div{ width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px #888888;}</style>
transition动画可以控制HTML组件的某个属性发生改变时经历的时间，使其以平滑渐变的方式发生改变，产生动画效果。有4个参数。
第一个参数：指定对哪个HTML元素进行处理。第二个参数：定义持续时间。第三个参数：指定渐变的速度。（有多个可用的属性值，请完成自学）第四个参数：指定延迟时间。 <style> div { width:100px; height:100px; background:red; transition:width 2s; } div:hover { width:300px; } </style> <body> <div></div> </body>如果想设置多个属性的渐变动画，使用逗号分隔。
transition: width,height 1s,1s ease,ease;并不是所有的CSS属性都支持渐变动画。
支持动画的CSS属性
annimation动画提供了更灵活的制作动画的方法。animation是一个符合属性，有5个参数：
第一个参数：指定动画的名称。第二个参数：指定动画的持续时间。第三个参数：指定动画的变化速度。第四个参数：指定动画延迟多久开始执行。第五个参数：指定动画循环执行的次数。 <style> div { width:100px; height:100px; background:red; animation:myfirst 5s; } @keyframes myfirst { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } </style> <body> <div></div> </body>