css3核心知识点的小结
导读： css3前缀（浏览器兼容） 根据了解，css3属性大部分支持ie10，部分支持ie9，少部分支持ie8 //前缀 //-webkit-SafariandChrome（苹果、谷歌） //-moz-Firefox（火...
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一起使用声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： css3核心知识点的小结
本文地址： https://pptw.com/jishu/664712.html