共计 2846 个字符，预计需要花费 8 分钟才能阅读完成。
css3 前缀（浏览器兼容）
根据了解，css3 属性大部分支持 ie10，部分支持 ie9，少部分支持 ie8
// 前缀
// -webkit- Safari and Chrome（苹果、谷歌）
// -moz- Firefox（火狐）
// -ms- IE9（IE 浏览器）
// -o- Opera（世界之窗）
// 例如 ie 兼容：
// -ms-transform（转换）
// -ms-transition（过渡）
// @-ms-keyframes（关键帧）
// -ms-animation（动画）
transform（转换）
（ie9 及以上支持，ie9 需添加前缀 -ms-）
// transfrom 属性的方法使用
transform: scale(30, 60); // 缩放：X 轴缩放 30 倍，Y 轴缩放 60 倍，只有一个值时为 XY 缩放倍数
transform: skew(30deg, 60deg); // 倾斜：X 轴倾斜 30 度，Y 轴倾斜 60 度，只有一个值时为 X 轴 倾斜度数
transform: translate(30px, 60px); // 移动：X 轴平移 30 px，Y 轴平移 60 px，只有一个值时为 X 轴 平移距离
transform: rotate(30deg); // 旋转：顺时针旋转 30 度
transform: rotateX(30deg); // 3D 水平旋转：3D X 轴顺时针翻转 30 度
transform: rotateY(60deg); // 3D 垂直旋转：3D Y 轴顺时针翻转 60 度
transform: matrix(1, 0, 0, 1, 0, 0); // 整体转换：(缩放 X, 倾斜 X, 倾斜 Y, 缩放 Y, 移动 X, 移动 Y)
// 注意：6 个参数 全部为数值，不带单位
// 1、缩放 X X 轴缩放倍数
// 2、倾斜 X X 轴倾斜百分比（相对宽度）
// 3、倾斜 Y Y 轴倾斜百分比（相对高度）
// 4、缩放 Y Y 轴缩放倍数
// 5、移动 X X 轴平移像素
// 6、移动 Y Y 轴平移像素
transition（过渡）
（ie10 及以上支持）
transition-property: transform; // 属性名称
transition-duration: 2s; // 用时长度（默认为 0s）
transition-timing-function: linear; // 过渡效果（曲线 ease（默认）/ 匀速 linear）
transition-delay: 1s; // 何时开始（默认为 0s）
transition: transform 2s linear 1s; // transform，用时 2s，匀速，1s 后开始
@keyframes（关键帧）
（ie10 及以上支持）
// -webkit- 等前缀在 keyframes 前面添加
// from ~ to
@keyframes cssName1 {
from {
background: red;
}
to {
background: green;
}
}
// 0% ~ 100%
@keyframes cssName2 {
0% {
transform: translate(0);
}
25% {
transform: translate(-200px);
}
50% {
transform: translate(0);
}
75% {
transform: translate(200px);
}
100% {
transform: translate(0);
}
}
animation（动画）
（ie10 及以上支持）
animation-name: name; // 动画名称
animation-duration: 2s; // 用时长度（默认为 0s）
animation-timing-function: linear; // 过渡效果（曲线 ease（默认）/ 匀速 linear）
animation-delay: 1s; // 何时开始（默认为 0s）
animation-iteration-count: infinite; // 播放次数（1（默认）/infinite 永远）
animation-direction: alternate; // 顺逆播放（normal 正向（默认）/alternate 反向）
animation-play-state: paused; // 动画状态（running 运动（默认）/paused 暂停）
animation: name 2s linear 1s infinite alternate paused; // name，用时 2s，匀速，1s 后开始，无限循环，反向，暂停
css3 其他属性
css3 边框
// ie9 及以上支持
border-radius: 10px; // 边框圆角
// ie9 及以上支持
box-shadow: 10px 10px 5px #999; // 边框阴影（X 轴偏移像素、Y 轴偏移像素、模糊像素大小、颜色）
// ie11 及以上支持
border-image: url(bg.jpg) 30 30 round; // 边框背景（背景、X 轴、Y 轴、重复性）
css3 背景（ie9 及以上支持）
background-size: 40% 100%; // 背景图大小（像素或百分比缩放）
background-origin: content-box; // 背景图定位区域（content-box、padding-box（默认）、border-box）
background-clip: content-box; // 背景绘制区域（content-box、padding-box（默认）、border-box）
css3 文本
// ie10 及以上支持
text-shadow: 3px 2px 1px #f00; // X 轴、Y 轴、模糊距离、颜色（文字阴影）
// ie8 及以上支持
word-wrap: break-word; // 对长单词进行拆分，并换行到下一行（英文换行）
CSS3 字体（ie9 及以上支持）
@font-face{
font-family: myFirstFont;
font-weight: bold;
src: url(‘Sansation_Light.ttf’),
url(‘Sansation_Light.eot’); // IE9+
}
body{
font-family: myFirstFont; // 定义字体的名称
}
css3 多列（ie9 及以上支持）
column-count: 3; // 元素中的文本 分隔的列数
column-gap: 40px; // 元素中的文本 列之间的间隔
column-rule: 3px outset #f00; // 元素中的文本 列之间的宽度、样式和颜色
css3 用户界面
// ie8 及以上支持
box-sizing: border-box; // 元素宽高是否包含 padding 和 border
// content-box 不包含（默认）
// border-box 包含
// ie 不支持
resize: both; // 调整元素尺寸，需添加 overflow: auto 一起使用
// horizontal 可调宽
// vertical 可调高
// both 可调宽高
// none 不可调
// ie 不支持
outline-offset: 100px; // 在元素外 100px 处 10px 的轮廓
// 可配合 outline: 10px solid green 一起使用
ps：第一次写文章，好的开始，加油 …
