一些最重要CSS3模块如下:
选择器
盒模型
背景和边框
文字特效
2D/3D转换
动画
多列布局
用户界面
1.有了 CSS3 的
border-image
属性,你可以使用图像创建一个边框(IE不支持)
border-image:url(border.png) 30 30 round; //平铺border-image:url(border.png) 30 30 stretch; //拉伸
详细点击此处
2.CSS3 background-image属性,背景图片
background-image: url(img_flwr.gif), url(paper.gif); //显示两张图片,用逗号分开,显示在最顶端的为第一张,可放多张。background-position: right bottom, left top; //背景的显示位置background-repeat: no-repeat, repeat; //背景是否重复显示
3.CSS3 background-size 属性
background-size指定背景图像的大小。
4.CSS3 的 background-origin 属性
background-origin
属性指定了背景图像的位置区域。
content-box, padding-box,
和
border-box
区域内可以放置背景图像。
5.CSS3 background-cli
p属性
CSS3中
background-clip
背景剪裁属性是从指定位置开始绘制
有三个属性
content-box, padding-box,
border-box只有设置了边框宽度才可以剪。
6.背景渐变
线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
径向渐变(Radial Gradients)- 由它们的中心定义
具体使用点击此处
7.CSS3字体
在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。
@font-face{font-family: myFirstFont;src: url(\'Sansation_Light.ttf\'),url(\'Sansation_Light.eot\'); /* IE9 */}div{font-family:myFirstFont;}
CSS3字体描述
8.转换
2D转换
3D转换
9.过渡
transition
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
div {width: 100px;height: 100px;background: red;-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */transition: width 2s, height 2s, transform 2s;}div:hover {width: 200px;height: 200px;-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */transform: rotate(180deg);}
详情链接
10.动画
要创建 CSS3 动画,你需要了解 @keyframes 规则。
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%。
0% 是动画的开始,100% 是动画的完成。
为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
还可以加上位置,2d,3d等。
div{width:100px;height:100px;background:red;animation:myfirst 5s;-moz-animation:myfirst 5s; /* Firefox */-webkit-animation:myfirst 5s; /* Safari and Chrome */-o-animation:myfirst 5s; /* Opera */}@keyframes myfirst{0% {background:red; left:0px; top:0px;}25% {background:yellow; left:200px; top:0px;}50% {background:blue; left:200px; top:200px;}75% {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}
11.CSS3 可以将文本内容设计成像报纸一样的多列布局。
详细属性点击此处
12.在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。
点击此处了解
13.CSS3图片
大部分靠伪类
:hover :active
实现
点击此处
14.CSS3分页
如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航。
详细点击此处
15.CSS3
box-sizing
属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。
16.CSS3弹性盒子Flex Box
菜鸟教程链接
阮一峰老师教程链接
flexbox的练习网站
17.CSS3 多媒体查询
详情点击此处