全棧工程師知識點彙總——css3

CSS3【控制樣式，網頁佈局】

——CSS3中新特性樣式篇

### 背景

background-origin： 規定背景圖片的定位區域。
padding-box 背景圖像相對內邊距定位【默認值】
border-box 背景圖像相對邊框定位【以邊框左上角爲參照進行位置設置】
content-box 背景圖像相對內容區域定位【之內容區域左上角爲參照進行位置設置】

備註：1. 默認盒子的背景圖片是在盒子的「內邊距」左上角對齊設置。

background-clip： 規定背景的繪製區域。
border-box 背景被裁切到邊框盒子位置 【默認值：將背景圖片在整個容器中顯示】
padding-box 背景被裁切到內邊距區域【將背景圖片在內邊距區域（包含內容區域）顯示】
content-box 背景被裁切到內容區域【將背景圖片在內容區域顯示】

background-size： 規定背景圖片的尺寸。
cover 將背景圖片按照原來的縮放比，將整個容器鋪滿；
contain 將背景圖片按照原來的縮放比，完整的顯示在容器中。
（不肯定會將整個容器鋪滿……）

### 邊框

box-shadow： 盒子陰影
例子：box-shadow:0px 0px 10px red;
第一個參數：表明陰影在水平方向的偏移量（正數向右，負數向左）；
第二個參數：表明陰影在垂直方向的偏移量（正數向下，負數向上）；
第三個參數：表明陰影的模糊度（不能設置負數）；
第四個參數：陰影顏色。
（設置多個陰影，使用逗號隔開）

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： 設置文本陰影

## CSS3新特性之選擇器篇

屬性選擇器：
[屬性名=值] {}
[屬性名] {} 匹配對應的屬性便可
[屬性名^=值] {} 以值開頭
[屬性名*=值] {} 包含
[屬性名$=值] {} 以值結束

結構僞類選擇器：
: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 選中第一個字符

## CSS3新特性之顏色漸變

線性漸變三要素：
1. 開始顏色和結束顏色
2. 漸變的方向
3. 漸變的範圍

background-image: linear-gradient(
to right,
red,
blue
);

備註：
表示方向：
1. to + right|top|bottom|left
2. 也經過角度表示一個方向：
0deg （從下向上漸變）
90deg （從左向右）
135deg（對角線）

徑向漸變：
/* 徑向漸變 */

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

縮放：ransform: scaleX(0.5) scaleY(1) scaleZ(1);

傾斜：transform: skewX(30deg) skewY();

透視：perspective: 1000px;
（在網頁中實現近大遠小的效果。給父元素添加）

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;

簡寫：
transition: all 1s linear 1s;

### 動畫

一、定義動畫集

@keyframes rotate {

/* 定義開始狀態 0%*/
from {
transform: rotateZ(0deg);
}

/* 結束狀態 100%*/
to {
transform: rotateZ(360deg);
}
}

二、在樣式中調用
/* 動畫名稱 */
animation-name: rotate;

/* 設置動畫時間 */
animation-duration: 2s;

/* 設置動畫執行的次數: infinite 無限執行; */
animation-iteration-count: infinite;

/* 動畫執行的速度類型 */
animation-timing-function: linear;

/* 設置動畫逆波（滾過來滾過去） */
animation-direction: alternate;

/* 設置動畫延時 */
animation-delay: 1s;

/* 設置動畫結束時候的狀態 */
animation-fill-mode: forwards;

.box:hover {
/* 動畫暫停 */
animation-play-state: paused;
}
注意：
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; 【默認值】

PS：設置縮放比： 父元素 display: flex; 子元素 flex: n;