css3中心见识点的小结（代码示例）
发布时间：08/01 来源：未知 浏览：
关键词：
本篇文章给大家带来的内容是对于css3中心见识点的小结（代码示例），有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。
css3前缀（阅读器兼容）
依据理解，css3属性大局部支撑ie10，局部支撑ie9，少局部支撑ie8
// 前缀 // -webkit- Safari and Chrome（iphone、谷歌） // -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 一起运用以上就是css3中心见识点的小结（代码示例）的细致内容，更多请关注 百分百源码网 其它相干文章！
