CSS3相关知识练习

一、问答

CSS3有哪些常见的新特性？

** 1、CSS 选择器 **
例如：E:nth-child(even)，E :nth-child(odd)，E:not()，E:first-child，E:nth-last-child(n) ，E:nth-of-type(n)，E:nth-last-of-type(n)，E:last-child，E:first-of-type ，E:checked 等等
** 2、盒模型 **
例如：box-sizing: border-box
** 3、背景和边框 **

• a、背景
  background-clip 规定背景的绘制区域;
  background-origin 规定背景图片的定位区域;
  background-size 规定背景图片的尺寸;
• b、边框
  border-image 设置所有边框图像的速记属性。
  border-radius 一个用于设置所有四个边框- *-半径属性的速记属性
  box-shadow 附加一个或多个下拉框的阴影

** 4、文字特效 **
text-shadow属性适用于文本阴影;
word-wrap:break-word 自动换行属性允许您强制文本换行
word-break: keep-all;//break-all 单词拆分换行属性
@font-face 规则

** 5、2D/3D转换 **

Paste_Image.png

3D转换属性

3D 转换方法

** 6、动画 **

Paste_Image.png

** 7、多列布局 **

Paste_Image.png

** 8、用户界面 **

Paste_Image.png

** 9、渐变**
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

以上具体详情见此处：http://www.runoob.com/css3/css3-tutorial.html

补充：
1、关于3d转换的资料可详见： http://www.w3cplus.com/css3/css3-3d-transform.html
2、关于2d中的transform:matrix() 可详见如下:
http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

3、对于低版本IE（IE6-IE9）兼容CSS3方法可见：css3pie官网 或PIE使IE支持CSS3圆角盒阴影与渐变渲染

二、代码

（一）、写出如下 CSS3效果的简单事例

1、圆角， 圆形
2、div 阴影
3、2D 转换：放大、缩小、偏移、旋转
4、3D 转换：移动、旋转
5、背景色渐变
6、过渡效果
7、动画

代码：

    
    
    


圆角
圆形
![](./lunbo2.jpg)
美丽的风景
![](./lunbo1.jpg)
鼠标放上去我会放大

    
![](./1.jpg)
鼠标放上去我会移动和旋转




    ![](./lunbo3.jpg)
    ![](./lunbo3.jpg)
    
鼠标放上来我会慢慢动




    按钮正在被连续按下

预览地址：https://github.com/have-not-BUG/task/blob/master/renwu/task44/1/task44-1.html

（二）、实现如下全屏图加过渡色的效果（具体效果随意）

代码：

预览地址：https://github.com/have-not-BUG/task/blob/master/renwu/task44/2/task44-2.html

（三）、写出如下 loading 动画效果

代码：

预览地址：https://github.com/have-not-BUG/task/blob/master/renwu/task44/3/task44-3A.html

代码：

预览地址：https://github.com/have-not-BUG/task/blob/master/renwu/task44/3/task44-3B.html

**本文版权归本人即笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *