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)复杂的如下图:

css  css3新特性

border-radius:

css  css3新特性

box-shadow:

css  css3新特性

border-image:
css  css3新特性

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

(1)简单如下几个:

rotate:旋转

translate:转换

scale:缩放

matrix:矩阵

skew:倾斜

perspective:透视

(2)复杂的如下图:

css  css3新特性

css  css3新特性

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

(1)简单如下几个:

background-size

background-clip

background-origin

(2)复杂的如下图:

css  css3新特性

background-clip:

css  css3新特性

background-origin:

css  css3新特性

background-size:

css  css3新特性

5.文本特效:为文本添加阴影,换行等。

(1)简单如下几个:

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

word-wrap:强制文本换行。

(2)复杂的如下图:

css  css3新特性

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

(1)简单如下几个:

@font-face:

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

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

(2)复杂的如下图:

css  css3新特性

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

(1)简单如下几个:

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

transition-duration:过滤效果的时长

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

transition-delay:何时开始过滤

(2)复杂的如下图:

css  css3新特性

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

(1)简单如下几个:

keyframes:关键帧

animation:动画

(2)复杂的如下图:

css  css3新特性

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

上一篇:kdiff3的主窗口说明 Base Local Remote 分别代表什么分支


下一篇:#C++初学记录(贪心算法#结构体#贪心算法)