border-radius是向元素添加圆角边框

border-radius的值可以用px，还可以用百分比或者em

例：border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 

text-shadow为文本阴影

text-shadow: X-Offset Y-Offset blur color;

X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；      

Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；

Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；

Color：是指阴影的颜色，其可以使用rgba色。

例如：text-shadow: 1px  1px 1px #ccc

当子元素就一种：比如都是p时，使用.wrapper>p:first-child（实验了一下这种情况下使用.wrapper>p:first-of-                               type也是可以的）

当子元素有多种：比如有p，div等时，使用.wrapper>p:first-of-type

css生成内容

：before，after{

    clear：both；

    overflow：hidden；

}

外轮廓属性：

outline：color | style | width 

自由缩放属性(是否可拉大拉小)：

resize：none | both | horizontal |vertical |inherit

matrix(scaleX(),skewX(),skewY(),scaleY(),translateX(),translateY());
a为水平伸缩量，1为原始大小；
b为纵向扭曲，0为不变；
c为横向扭曲，0不变；
d为垂直伸缩量，1为原始大小；
e为水平偏移量，0是初始位置；
f为垂直偏移量，0是初始位置

1、阴影模糊半径与阴影扩展半径的区别

阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

2、X轴偏移量和Y轴偏移量值可以设置为负数

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

position:absolute;
top:50%;
left:50%;
使得div左上角位于窗口正中间。
translate(-50%,-50%)使div向左向上方向移动div自己width、height的50%，所以div中心位于窗口中心位置，即实现了居中。

伸缩布局：

flex-direction:row  justify-content:控制水平方向。

flex-direction:column align-items: 控制垂直方向

伸缩布局：

flex-direction:row  justify-content:控制方向左右。

盒模型：

一：w3c标准模型  width=208等于content宽度

元素宽度是指content宽度+padding+border

二：传统IE模型 width=208等于content+padding+border

  元素宽度：content宽度  

如果两个宽度一致，那么内容宽度还是传统IE的小

元素的宽度box-sizing：content-box |border-box |inherit

关于backwards和none的区别：

backwards会在动画开始前显示动画的第一帧，

例如当动画是在页面加载完成后5秒开始，动画是由红色渐变为绿色，而div本来的背景色是黑色。

那么设置backwards属性会使得在动画尚未开始的前五秒div显示为红色，

而设置none的话，前五秒会div会显示自己的背景色黑色。

animation-play-state属性主要用来控制元素动画的播放状态。

参数：其主要有两个值：running和paused。

其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。


:hover伪类是加在div元素上的（代码- div:hover span， 对div添加hover伪类，控制span的属性），div是整个大框。所以鼠标经过div块就开始动画，移出就停止。

span在div内，div：hover span的意思是：当鼠标放置在div框部分的时候，动画开始播放

如果css样式改为了div span:hover，那么需要将鼠标放在span方块上，才能使动画开始播放