Summary of core knowledge points of css3 (code examples)

This article brings you a summary of the core knowledge points of CSS3 (code examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

css3 prefix (browser compatible)

According to our understanding, most css3 attributes support ie10, some support ie9, and a few support ie8

// 前缀
// -webkit-    Safari and Chrome（苹果、谷歌） 
// -moz-       Firefox（火狐） 
// -ms-        IE9（IE浏览器） 
// -o-         Opera（世界之窗）

// 例如ie兼容：
// -ms-transform（转换）
// -ms-transition（过渡）
// @-ms-keyframes（关键帧）
// -ms-animation（动画 ）

transform (conversion)

(supported by ie9 and above, ie9 needs to add the prefix -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 (transition)

(Supported by ie10 and above)

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 (keyframes)

(Supported by ie10 and above)

// -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 (animation )

(supported by ie10 and above)

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 other attributes

css3 border

// 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 background (supported by ie9 and above)

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 text

// ie10及以上支持
text-shadow: 3px 2px 1px #f00;               // X轴、Y轴、模糊距离、颜色（文字阴影）
// ie8及以上支持
word-wrap: break-word;                       // 对长单词进行拆分，并换行到下一行（英文换行）

CSS3 font (supported by ie9 and above)

@font-face{
  font-family: myFirstFont;
  font-weight: bold;
  src: url('Sansation_Light.ttf'),
       url('Sansation_Light.eot');           // IE9+
}
body{
  font-family: myFirstFont;                  // 定义字体的名称
}

css3 multiple columns (supported by ie9 and above)

column-count: 3;                             // 元素中的文本 分隔的列数
column-gap: 40px;                            // 元素中的文本 列之间的间隔
column-rule: 3px outset #f00;                // 元素中的文本 列之间的宽度、样式和颜色

css3 user interface

// 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 一起使用

The above is the detailed content of Summary of core knowledge points of css3 (code examples). For more information, please follow other related articles on the PHP Chinese website!