CSS3常用知識點梳理
阿新 • • 發佈：2018-12-30
CSS3中新特性樣式篇
背景
background-origin： 規定背景圖片的定位區域。 ☞ padding-box 背景影象相對內邊距定位（預設值） ☞ border-box 背景影象相對邊框定位【以邊框左上角為參照進行位置設定】 ☞ content-box 背景影象相對內容區域定位【以內容區域左上角為參照進行位置設定】 備註： 1. 預設盒子的背景圖片是在盒子的內邊距左上角對齊設定。 background-clip： 規定背景的繪製區域。 ☞ border-box 背景被裁切到邊框盒子位置 【將背景圖片在整個容器中顯示】 ☞ padding-box 背景被裁切到內邊距區域【將背景圖片在內邊距區域（包含內容區域）顯示】 ☞ content-box 背景被裁切到內容區域【將背景圖片在內容區域顯示】 應用: 1.移動端開發圖片裁切到內容區域，左右新增padding使可點選區域變大。 background-size： 規定背景圖片的尺寸。 ☞ cover ☞ contain
邊框
box-shadow：10px,10px,10px，red; 盒子陰影 四個引數代表的意思 1.陰影水平偏移量，正右負左 2.陰影垂直偏移量，正下負上 3.陰影模糊度，不能為負。 4.陰影顏色。 border-radius： 邊框圓角 border-image: 邊框圖片 /* 設定邊框圖片 */ border-image-source: url("2.png"); /* 邊框圖片裁切 : 不需要帶單位*/ border-image-slice: 20; /* 設定邊框圖片的平鋪方式 */ /* border-image-repeat: stretch; */ border-image-repeat: round; /* border-image-repeat: repeat; */ border-image-width: 20px;
文字
☞text-shadow： 設定文字陰影 同box-shadow
CSS3新特性之選擇器篇
☞ 屬性選擇器： [屬性名=值] {} div[class="selected"] [屬性名] {} 匹配對應的屬性即可 div[class] [屬性名^=值] {} 以值開頭 [屬性名*=值] {} 包含 [屬性名$=值] {} 以值結束 ☞ 結構偽類選擇器： :first-child {} 選中父元素中第一個子元素 必須是父元素中第一個元素 :last-child {} 選中父元素中最後一個子元素 必須是父元素中最後一個才會被選中 :nth-child(n) {} 選中父元素中正數第n個子元素 :nth-last-child(n) {} 選中父元素中倒數第n個子元素 備註； n 的取值大於等於0 n 可以設定預定義的值 odd[選中奇數位置的元素] even【選中偶數位置的元素】 n 可以是一個表示式： an+b的格式 ☞ 其他選擇器： :target 被錨鏈接指向的時候會觸發該選擇器 ::selection 當被滑鼠選中的時候的樣式 ::first-line 選中第一行 ::first-letter 選中第一個字元 word-break:break-all;換行 偽類和偽元素的區別？ 偽類是選擇器，偽元素是頁面中用css程式碼實現的元素。
CSS3新特性之顏色漸變
☞ 線性漸變：
1. 開始顏色和結束顏色
2. 漸變的方向
3. 漸變的範圍
background-image: linear-gradient(
to right,
red,
blue
);
備註：
表示方向：
1. to + right | top | bottom | left
2. 通過角度表示一個方向
0deg [從下向上漸變]
90deg【從左向右】
☞ 徑向漸變：
/* 徑向漸變 */
background-image: radial-gradient(
100px at center,
red,
blue
);
2D轉換
☞ 位移
transform: translate(100px,100px);
備註：
位移是相對元素自身的位置發生位置改變
☞ 旋轉
transform: rotate(60deg);
備註：
取值為角度
☞ 縮放
transform: scale(0.5,1);
備註：
取值為倍數關係，縮小大於0小於1，放大設定大於1
☞ 傾斜
transform: skew(30deg,30deg);
備註：
第一個值代表沿著x軸方向傾斜
第二個值代表沿著y軸方向傾斜
3D轉換
☞ 位移
transform: translateX() translateY() translateZ()
☞ 旋轉
transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);
☞ 縮放
transform: scaleX(0.5) scaleY(1) scaleZ(1);
☞ 傾斜
transform: skewX(30deg) skewY();
☞ transform-style: preserve-3d;
將平面圖形轉換為立體圖形
CSS3新特性之動畫篇
過渡
https://www.cnblogs.com/afighter/p/5731293.html
補間動畫
/* 設定哪些屬性要參與到過渡動畫效果中： all */
transition-property: all;
/* 設定過渡執行時間 */
transition-duration: 1s;
/* 設定過渡延時執行時間 */
transition-delay: 1s;
/* 設定過渡的速度型別 */
transition-timing-function: linear;
動畫
/* 1定義動畫集 */
@keyframes rotate {
/* 定義開始狀態 0%*/
from {
transform: rotateZ(0deg);
}
/* 結束狀態 100%*/
to {
transform: rotateZ(360deg);
}
}
注意：
1. 如果設定動畫集使用的是百分比，那麼記住百分比是相對整個動畫執行時間的。
CSS3新特性之網頁佈局篇
伸縮佈局或者彈性佈局【響應式佈局】
☞ 設定父元素為伸縮盒子【直接父元素】
display： flex
為什麼在伸縮盒子中，子元素會在一行上顯示？
1. 子元素是按照伸縮盒子中主軸方向顯示
2. 只有伸縮盒子才有主軸和側軸
3. 主軸： 預設水平從左向右顯示
4。 側軸： 始終要垂直於主軸
☞ 設定伸縮盒子主軸方向（flex-direction）
flex-direction: row; 【預設值】
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
☞ 設定元素在主軸的對齊方式( justify-content)
/* 設定子元素在主軸方向的對齊方式 */
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
☞ 設定元素在側軸的對齊方式 （align-items）
align-items: flex-start;
align-items: flex-end;
align-items: center;
/* 預設值 */
align-items: stretch;
☞ 設定元素是否換行顯示（flex-wrap）
1. 在伸縮盒子中所有的元素預設都會在一行上顯示
2. 如果希望換行：
flex-wrap: wrap | nowrap;
☞ 設定元素換行後的對齊方式（ align-content）
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
/* 換行後的預設值 */
align-content: stretch;