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.边框：创建圆角边框，向矩形添加阴影。

[b]（1）简单如下几个：[/b]

border-radius:圆角边框

box-shadow:阴影

border-image:图片

[b]（2）复杂的如下图：[/b]



border-radius:



box-shadow:



border-image:



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

（1）简单如下几个：

rotate:旋转

translate：转换

scale：缩放

matrix：矩阵

skew：倾斜

perspective：透视

（2）复杂的如下图：







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

[b]（1）简单如下几个：[/b]

background-size

background-clip

background-origin

[b]（2）复杂的如下图：[/b]



background-clip：





background-origin：



background-size：



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

[b]（1）简单如下几个：[/b]

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

word-wrap：强制文本换行。

[b]（2）复杂的如下图：[/b]





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

[b][b]（1）简单如下几个：[/b][/b]

@font-face：

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

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

[b][b]（2）复杂的如下图：[/b][/b]



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

[b][b][b]（1）简单如下几个：[/b][/b][/b]

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

transition-duration：过滤效果的时长

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

transition-delay：何时开始过滤

[b][b][b]（2）复杂的如下图：[/b][/b][/b]



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

[b][b][b][b][b]（1）简单如下几个：[/b][/b][/b][/b][/b]

[b][b][b][b][b]keyframes:关键帧[/b][/b][/b][/b][/b]

[b][b][b][b][b]animation:动画[/b][/b][/b][/b][/b]

[b][b][b][b][b][b][b][b][b]（2）复杂的如下图：[/b][/b][/b][/b][/b][/b][/b][/b][/b]

[b][b][b][b][b][b][b][b][b]

[/b][/b][/b][/b][/b][/b][/b][/b][/b]

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