css3核心知识点的小结

本篇文章给大家带来的内容是关于css3核心知识点的小结（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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一起使用