CSS动画DAY01
1.border-radius用于添加圆角效果
border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
<length>：用长度值设置对象的圆角半径长度。不允许负值
<percentage>：用百分比设置对象的圆角半径长度。不允许负值
border-radius:5px 10px 15px 20px; 一个矩形的四个角，顺序是顺时针
border-radius:50%; 圆形
2.box-shadow用于添加阴影效果
box-shadow：none|[inset? && [<offset-x><offset-y><blur-radius>?<spread-radius>?<color>?]]#
inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
<offset-x>: 这是第一个 length值设置水平偏移量，如果是负值则阴影位于元素左边。
<offset-y>: 这是第二个 length值设置垂直偏移量，如果是负值则阴影位于元素上面。
<blur-radius>:这是第三个 length值。值越大，糊糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。
<color>：设置对象的阴影的颜色。
3.text-shadow为文字添加阴影
textshadow：none | [inset? && [ <offset-x> <offset-y> <blur-radius>?<color>? ] ]#
inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
<offset-x>: 这是第一个 length值设置水平偏移量，如果是负值则阴影位于元素左边。
<offset-y>: 这是第二个 length值设置垂直偏移量，如果是负值则阴影位于元素上面。
<blur-radius>:这是第三个 length值。值越大，糊糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。
<color>：设置对象的阴影的颜色。
4.渐变色
<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)<side-or-corner> = [left | right] || [top | bottom]<color-stop> = <color> [ <length> | <percentage> ]?<angle>：用角度值指定渐变的方向（或角度）。<color-stop> 用于指定渐变的起止颜色：
实例：
background:linear-gradient(to bottom, #fff 0%, red 100%);
background:radial-gradient(#fff 0%, red 100%);
一个demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.rectangle{
border:1px solid;
width:100px;
height:100px;
border-radius:10px;
box-shadow: 10px 10px 5px #888;
text-shadow:1px 1px 2px red;
}
</style>
</head>
<body>
<div class="rectangle">这是一个矩形</div>
</body>
</html>
5.动效曲线
linear全程匀速：做匀速运动 linear 、看起来非常死板，不推荐使用。
ease-in缓入：本来没速度，越来越快， 相当于一个东西从零开始加速。适合用在一个元素离开页面的时候。
ease-out缓出：本来有一定的速度、慢慢刹车。 适合用在一个元素进入页面的时候。
ease-in-out缓入缓出：开头结尾都没有速度，先加速、再减速。是我们日常生活中最常见的物理运动。适合用在一个元素从页面 A 点到 B 点。
