css3核心知识点的小结（代码示例）

本篇文章给大家带来的内容是关于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核心知识点的小结（代码示例）的详细内容，更多内容请关注技术你好其它相关文章！