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核心知識點有哪些有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！