电话
13363039260
css3核心知识点的小结
2024-01-17 16:02 小编
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一起使用
猜你喜欢
联络方式：
13363039260
微信二维码 