前端——CSS学习（效果和动画）

CSS效果

1.box-shadow 投影

（1）含义：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2- 4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
（2）作用:1.营造层次感（立体感）2.充当没有宽度的边框（没有大小，不会占据位置）3.特殊效果
（3）语法

{box-shadow: h-shadow v-shadow blur spread color inset;}
对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}

（4）取值说明
inset: 默认阴影在边框外。使用 inset 后，阴影在边框内（即使是透明边框），背景之上内容之下。
<offset-x> <offset-y>: 这是头两个 <length>值，用来设置阴影偏移量。<offset-x> 设置水平偏移量，如果是负值则阴影位于元素左边。 <offset-y> 设置垂直偏移量，如果是负值则阴影位于元素上面。可用单位请查看 <length>。如果两者都是0，那么阴影位于元素后面。这时如果设置了 <blur-radius> 或 <spread-radius> 则有模糊效果。
<blur-radius>: 这是第三个 <length> 值。值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。
<spread-radius> : 这是第四个 <length> 值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。
<color> :如果没有指定，则由浏览器决定——各浏览器默认取色不一致，注意：在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证）

2.text-shadow

（1）含义：给文字进行投影
（2）作用: ①立体感 ②印刷品质感（边缘有模糊效果）
（3）语法

text-shadow: h-shadow v-shadow blur color;
div {text-shadow:X轴偏移量 Y轴偏移量 阴影范围大小 阴影范围大小}

3.border-radius 圆角

（1)含义：向 div 元素添加圆角边框

（2）语法

border-radius: 1-4 length|% / 1-4 length|%;

（3）取值说明
“/”前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径
length：定义圆角的形状；由浮点数字和单位标识符组成的长度值。不可为负值。
%：以百分比定义圆角的形状

（4）注意：

• 相关属性： border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius

• 按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同

• 如果第二个值省略&#x