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
(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不会只能提示,但是会提示错对)