20180403css总结

---恢复内容开始---

1.边框：

（1）盒子圆角：border-radius：5px/20%。

（2）盒子阴影：box-shadow ：有三个值时：表示距离左侧，距离上侧，影子颜色；

有四个值时，表示距离左侧，距离上侧，虚化的像素，影子颜色；

有五个值时，表示距离左侧，距离上侧，虚化的像素，影子颜色， 是不是显示在内部并且将颜色进行反转。

（3）边框图片：border-image。

2.背景：

（1）引入：background-image。

（2）背景尺寸：backgroung-size。

（3）背景平铺：backgroung-repeat。

（4）背景位置：background-position：top  right  bottom  left。

（5）多重背景：逗号分隔。

3.字体：

（1）文本阴影：text-shadow：四个值：分别代表距离左侧，上侧，模糊程度，阴影颜色。

（2）文本溢出属性：text-overflow：clip；ellipsis。

（3）文本换行属性：word-wrap:break-word。

4.旋转：transform

2D:

（1）rotate()--进行旋转，括号内部写旋转角度，默认顺时针旋转。允许负值，元素将进行逆时针旋转。

（2）transform：translate(30px,30)：向右30px，向下30px移动，原来位置保存。

（3）transform：scale(2，4)：宽度变为2倍，高度变为4倍。

（4）skew()--水平，垂直方向进行扭转，括号内是水平扭转角度，垂直扭转角度，内部文字会跟随扭转。例transform：skew(30deg，30deg)。

3D:

transform：rotateX()----沿水平X轴进行垂直的翻转，括号内写转动角度。

transform：rotateY()----沿水平Y轴进行垂直的翻转，括号内写转动角度。

5.过渡：

transition：专门应对颜色，长度，宽度，位置等变化的过渡。例transition：2s

6.动画：

（1）@keyframes规则用于创建动画。在@keyframes中规定css样式，就能创建由当前样式逐渐改为新样式的动画效果。

（2）使用animation进行动画捆绑。两个值：动画名称，时长。

（3）我们一般情况下使用0%--100%来规定动画发生的时机。或者使用关键词from..to..，效果等同于0%--100%。

（4）加上一个infinite值就可以无限执行了。

（5）ease---默认开始慢慢加速，结束时慢慢减速。

linear---默认始终使用相同速度运行。

alternate---交替执行（也可以称为正反执行）。

 

 

 

 

 

---恢复内容结束---