本篇文章给大家带来的内容是关于css3核心知识点的小结（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
css3前缀（浏览器兼容）
根据了解，css3属性大部分支持ie10，部分支持ie9，少部分支持ie8
// 前缀// -webkit- Safari and Chrome（苹果、谷歌） // -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核心知识点的小结（代码示例）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1613977.html
微信扫一扫 
支付宝扫一扫 
