css3前缀（浏览器兼容）

 

　　根据了解，css3属性大部分支持ie10，部分支持ie9，少部分支持ie8

 

　　//前缀

 

　　//-webkit-SafariandChrome（苹果、谷歌）

 

　　//-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轴平移30px，Y轴平移60px，只有一个值时为X轴平移距离

 

　　transform:rotate(30deg);//旋转：顺时针旋转30度

 

　　transform:rotateX(30deg);//3D水平旋转：3DX轴顺时针翻转30度

 

　　transform:rotateY(60deg);//3D垂直旋转：3DY轴顺时针翻转60度

 

　　transform:matrix(1,0,0,1,0,0);//整体转换：(缩放X,倾斜X,倾斜Y,缩放Y,移动X,移动Y)

 

　　//注意：6个参数全部为数值，不带单位

 

　　//1、缩放XX轴缩放倍数

 

　　//2、倾斜XX轴倾斜百分比（相对宽度）

 

　　//3、倾斜YY轴倾斜百分比（相对高度）

 

　　//4、缩放YY轴缩放倍数

 

　　//5、移动XX轴平移像素

 

　　//6、移动YY轴平移像素

 

　　transition（过渡）

 

　　（ie10及以上支持）

 

　　transition-property:transform;//属性名称

 

　　transition-duration:2s;//用时长度（默认为0s）

 

　　transition-timing-function:linear;//过渡效果（曲线ease（默认）/匀速linear）

 

　　transition-delay:1s;//何时开始（默认为0s）

 

　　transition:transform2slinear1s;//transform，用时2s，匀速，1s后开始

 

　　@keyframes（关键帧）

 

　　（ie10及以上支持）

 

　　

 

　　//-webkit-等前缀在keyframes前面添加

 

　　//from~to

 

　　@keyframescssName1{

 

　　from{

 

　　background:red;

 

　　}

 

　　to{

 

　　background:green;

 

　　}

 

　　}

 

　　//0%~100%

 

　　@keyframescssName2{

 

　　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:name2slinear1sinfinitealternatepaused;//name，用时2s，匀速，1s后开始，无限循环，反向，暂停

 

　　css3其他属性

 

　　css3边框

 

　　//ie9及以上支持

 

　　border-radius:10px;//边框圆角

 

　　//ie9及以上支持

 

　　box-shadow:10px10px5px#999;//边框阴影（X轴偏移像素、Y轴偏移像素、模糊像素大小、颜色）

 

　　//ie11及以上支持

 

　　border-image:url(bg.jpg)3030round;//边框背景（背景、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:3px2px1px#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:3pxoutset#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:10pxsolidgreen一起使用