CSS3
背景裁切
1 基本語法格式:background-clip:屬性值
2 一般background-clip是和background-origin搭配使用
3 必須寫瀏覽器的私有前綴(用chrome舉例:-webkit-background-clip:border-box)
- border-box:相對于盒子邊框 進行裁切
- padding-box:相對于邊距進行裁切
- content-box:相對于盒子內容進行裁切
背景大小
1 基本語法
- 背景大小是用背景圖來進行設置
- 常用的取值有兩種(像素和百分比)
- 常見的屬性:contain/cover
背景漸變色
注意：背景漸變是指背景圖，不是指背景色
基本語法:background-images:
1 線性漸變
- 必須寫瀏覽器的私有前綴(以chrome舉例:background-image:-webkit-linear-gradient)
- linear-gradient(開始的位置，顏色值1，顏色值2.....)
- 默認的的情況下第一個顏色會在起始位置出現，最后一個顏色會在結束的位置位置出現，中間的顏色會在等分點的位置出現
- 可以在顏色的后面加上一個百分比，顯示出現的位置
2 經向漸變
- 必須寫瀏覽器的私有前綴
- 基本語法:background-image:radial-gradient(起始點的橫坐標,起始點的縱坐標，顏色值1，顏色值2，)
- 最后書寫的顏色值是會出現在離起點最遠的地方
盒子陰影：
- 基本語法:box-shadow:第一個值是x軸的正值，第二個是Y軸的正值，第三個是羽化程度，第四個是延展的長度，第五個是顏色書寫，第六個是內陰影的設置（inset）
- 方向是順時針方向進行執行
- 可以設置多個陰影，只需要使用逗號隔開即可。
div{
box-shadow:0px 0px 20px 10px red /;
}
顯示的效果如下：
盒子的陰影.png
文字陰影
- 基本語法:text-shadow:右 下 羽化值 顏色
過渡動畫
核心屬性:transition
1 基本語法和常見的屬性值
- transition:過渡動畫的屬性，過渡的時間，緩動的曲線(默認ease)，延遲的時間
- 多個過渡動畫可以使用逗號分隔開來。
- 當使用多個屬性的時候可以用all來代替所有屬性
- 只要是有值可以轉化為成數值的屬性都可以進過渡動畫的實現
- 在chrome中甚至連背景圖都可以發生過渡動畫。
- 實現過渡動畫有兩步：①先進行元素的移上事件(可以使用hover)里面加上要過渡的屬性值。②在元素里面加上過渡動畫的核心屬性以及相對應的值。
變型屬性:transform
1 變型
- 變型變得是坐標軸
- 一個元素可以攜帶多個變型，且之間用逗號分隔開來即可(后一個變型是依照前一個變型的基礎上進行變型，當最后一個坐標完成之后，坐標軸才會回到初始位置)
2 二維變型（樣式/值為deg)
- 旋轉:rotate/方向為順時針方向
- 斜切:skew/方向為
- 縮放:scale/x軸的縮放和Y軸的縮放（如果只寫一個值，那么就會等比縮放）
- 位移變型:translate/方向是x軸的正向平移和Y軸的正向平移的距離(如果設置百分比，那么百分比是相對于元素本身的)
10/11
