css css3新特性

css  css3新特性

一.css3是什么？

我不喜欢把已有的概念从一个地方抄到另一个地方，还是喜欢如下方式。

参考百度百科：

http://baike.baidu.com/link?url=z2VMay9efpFDoQYBR5WuQ_hVP7SWsNltmlm7Qna3yxfA6P0VtrpcI6HjamwbLrQTbcbvyxuuJEsy2c7JBXemyq

参考w3school：

http://www.w3school.com.cn

二.css3新特性：

1.兼容各大浏览器（重中之重）

-moz代表firefox浏览器私有属性

-ms代表IE浏览器私有属性

-webkit代表chrome、safari私有属性

2.边框：创建圆角边框，向矩形添加阴影。

（1）简单如下几个：

border-radius:圆角边框

box-shadow:阴影

border-image:图片

（2）复杂的如下图：

border-radius:

box-shadow:

border-image:

3.转换：允许我们对元素进行旋转、缩放、移动或倾斜。

（1）简单如下几个：

rotate:旋转

translate：转换

scale：缩放

matrix：矩阵

skew：倾斜

perspective：透视

（2）复杂的如下图：

4.背景：可以为背景图片设置大小，背景中可以添加多个背景图片。

（1）简单如下几个：

background-size

background-clip

background-origin

（2）复杂的如下图：

background-clip：

background-origin：

background-size：

5.文本特效：为文本添加阴影，换行等。

（1）简单如下几个：

text-shadow：规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色。

word-wrap：强制文本换行。

（2）复杂的如下图：

6.字体：可以自定义字体

（1）简单如下几个：

@font-face：

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

（2）复杂的如下图：

7.过滤：当元素从一种样式变换为另一种样式时为元素添加效果

（1）简单如下几个：

transition-property：过渡效果的 CSS的名称

transition-duration：过滤效果的时长

transition-timing-function：速度效果的速度曲线

transition-delay：何时开始过滤

（2）复杂的如下图：

8.动画：使元素从一种样式逐渐变化为另一种样式的效果

（1）简单如下几个：

keyframes:关键帧

animation:动画

（2）复杂的如下图：

要想学好前端技术，必须熟记属性及值，所谓的熟记不是背而是手写，不使用带有智能提示的工具能写出来的！推荐工具（editplus不会只能提示，但是会提示错对）