Résumé des points de connaissances de base de CSS3 (exemples de code)

Ce que cet article vous apporte est un résumé des points de connaissance de base de CSS3 (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Préfixe CSS3 (compatible avec les navigateurs)

Selon notre compréhension, la plupart des attributs CSS3 prennent en charge ie10, certains prennent en charge ie9 et un petit nombre prennent en charge ie8

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

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

transformation (conversion)

(pris en charge par ie9 et supérieur, ie9 doit ajouter le préfixe -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)

(ie10 et supérieur pris en charge)

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 (images clés)

(ie10 et supérieur pris en charge)

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

(pris en charge par ie10 et supérieur)

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后开始，无限循环，反向，暂停

autres attributs CSS3

bordure 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轴、重复性 ）

arrière-plan CSS3 (pris en charge par ie9 et supérieur)

background-size: 40% 100%;                   // 背景图大小（像素或百分比缩放）
background-origin: content-box;              // 背景图定位区域（content-box、padding-box（默认）、border-box） 
background-clip: content-box;                // 背景绘制区域（content-box、padding-box（默认）、border-box）

texte CSS3

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

Police CSS3 (prise en charge par ie9 et supérieur)

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

css3 multi-colonnes (prise en charge par ie9 et supérieur)

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!