一、 注意web
-webkit- 对于Safari 5 以及更老的版本或chrome有时须要前缀 -webkit-。chrome
-o- Opera浏览器。浏览器
-moz- 兼容老的firefox服务器
二、布局
CSS3 被划分为模块。字体
其中最重要的 CSS3 模块包括:动画
选择器spa
框模型firefox
背景和边框设计
文本效果
2D/3D 转换
动画
多列布局
用户界面
三、
边框
border-radius 设置边框圆角的半径
box-shadow 设置阴影效果
border-image 设置边框图片
4、
背景
background-origin 设置背景图片的位置 context-box border-box padding-box
background-size 设置背景图片的拉伸大小
5、
文本效果
text-shadow 文字阴影
word-wrap 自动换行
设置显示点点点....
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
text-overflow: ellipsis;
}
6、字体
经过 CSS3,web 设计师能够使用他们喜欢的任意字体。
当您您找到或购买到但愿使用的字体时,可将该字体文件存放到 web 服务器上,它会在须要时被自动下载到用户的计算机上。
您“本身的”的字体是在 CSS3 @font-face 规则中定义的。
7、转换
transform
2D 转换方法:
translate() 移动
rotate() 旋转
scale() 宽度高度成倍扩大
skew() 翻转
matrix()
3D 转换方法:
rotateX()
rotateY()
8、过渡
transition
能够与transform结合着使用
9、动画
@keyframes 规则用于建立动画。在 @keyframes 中规定某项 CSS 样式,就能建立由当前样式逐渐改成新样式的动画效果。
将规则绑定到元素上用animation
注意浏览器的兼容性
10、多列
多列属性:
column-count
column-gap
column-rule
11、用户界面
用户界面属性:
resize
box-sizing
outline-offset