CSS3-背景篇

1. 文字陰影`text-shadow`

text-shadow屬性還沒有出現時，大家在網頁設計中陰影一般都是用photoshop做成圖片
現在有了css3可以直接使用 text-shadow屬性來指定陰影
這個屬性可以有兩個作用：產生陰影和模糊主體。
這樣在不使用圖片時能給文字增加質感

語法：

text-shadow ：x軸偏移 y軸偏移 模糊距離 陰影顏色;
// (必須)x、y軸取正負值 如5px、-5px
// (可選)模糊距離必須取正值如：5px
// (可選)陰影顏色為色值，也可以是rgba透明色
// 可以給一個物件應用一組或多組陰影效果，方式如前面的語法顯示一樣，用逗號隔開。

2. 盒子陰影`box-shadow`

box-shadow 屬性向邊框新增一個或多個陰影

語法：

box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 內/外部陰影;

屬性：

1. h-shadow(必需):水平陰影位置。允許負值如：5px
2. v-shadow(必需):垂直陰影位置。允許負值如：-5px
3. blur(可選):模糊距離,必須取正值如：5px
4. spread(可選):陰影尺寸,值越大陰影的擴散面積越大，預設值為0px
5. color(可選):陰影顏色
6. 內/外部陰影(可選):外部陰影outset(預設值)  內部陰影inset

注意：

1. 一般跟文字陰影一樣寫四個值即可：水平 垂直 模糊 顏色
2. 前面兩個屬性是必須寫的，其餘的可以省略
3. 外陰影為預設的（outset）但是不能寫， 想要 內陰影就寫inset

案例：

/*給盒子底部底部陰影*/
box-shadow：0 10px 20px rgba(0,0,0,.1);

3. 顏色設定

RGBA 說得簡單一點就是在RGB的基礎上加進了一個Alpha透明度
語法:
R：紅色值。正整數 | 百分數
G：綠色值。正整數 | 百分數
B：藍色值。正整數 | 百分數
A：透明度。取值0~1之間
```
/*比如紅色*/
background: rgba(255, 0, 0, 1);
```
HSLA 色彩模式與HSL相同，只是在HSL模式上新增了Alpha透明度
語法：
H：Hue(色調,色相)。
       取值為：0 – 360,過渡為：(紅橙黃綠青藍紫紅)，0(或360)表示紅色，120表示綠色，240表示藍色，
       也可取其他數值來指定顏色。
S：Saturation(飽和度)。
      取值為：0.0% - 100.0%
L：Lightness(亮度)。
      取值為：0.0% - 100.0%，50%是平衡值
A：Alpha透明度。
     取值0~1之間。
```
/*比如紅色*/
background: hsla(360, 100%, 50%, 1);
```

4. 背景漸變

概述： 漸變是CSS3當中比較豐富多彩的一個特性，通過漸變我們可以實現許多炫麗的效果，有效的減少圖片的使用數量，並且具有很強的適應性和可擴充套件性。
漸變可分為線性漸變、徑向漸變
-webkit-linear-gradient 前面加上瀏覽器私有字首-webkit-，起始位置引數不用寫to，方向與有to引數相反

線性漸變
概述： linear-gradient線性漸變指沿著某條直線朝一個方向產生漸變效果

 /*字首新增在`linear-gradient前面*/
background:linear-gradient(漸變色的起始位置,起始顏色,結束顏色 )
/*也可以（漸變色起始位置,顏色、位置,顏色、位置,...）*/
/* 例如：*/
background:linear-gradient(to right, red 0%, green 30%, #008c8c 40%, pink 100%); 
/*百分比表示位置度數*/

引數說明:
A. 第一個參數列示線性漸變的方向，
    a). to left：設定漸變為從右到左。相當於: 270deg;
    b). to right：設定漸變從左到右。相當於: 90deg;   
    c). to top：設定漸變從下到上。相當於: 0deg;
    d). to bottom：設定漸變從上到下。相當於: 180deg。這是預設值，等同於留空不寫。
    f). 也可以直接指定度數，如45deg
B. 第二個引數是起點顏色,可以指定顏色的位置
C. 第三個引數是終點顏色，你還可以在後面新增更多的引數，表示多種顏色的漸變

徑向漸變
概述： radial-gradient徑向漸變指從一箇中心點開始沿著四周產生漸變效果

background: radial-gradient(形狀, 大小, 座標, 顏色)

引數說明：
A. 第一個引數shape：漸變的形狀，ellipse表示適配元素大小(寬高不一樣的情況下為橢圓形)，circle表示圓形。
  預設為ellipse，如果元素形狀為正方形的元素，則ellipse和circle顯示一樣
B. 第二個引數size：漸變的大小，即漸變到哪裡停止，它有四個值。 
  a). closest-side：最近邊； 
  b). farthest-side：最遠邊；
  c). closest-corner：最近角； 
  d). farthest-corner：最遠角。
  f). 預設是最遠的角farthest-corner
C. 第三個引數position：確定圓心的位置。預設為正中心。如果提供2個引數，第一個表示橫座標，第二個表示縱座標；
  如果只提供一個，第二值預設為50%，即center
  取值：可以賦值座標，參照元素左上角座標點如：at 10px 10px
        也可以為關鍵字：left right top bottom center 記得前面加一個at 
D. 第四個引數color：指定顏色，可以寫多個也可以加上位置如：red 10%,bule 40%...
F. 前三個引數為可選項

重複漸變
用徑向漸變做:

background:repeating-radial-gradient(形狀 大小 座標，開始顏色 開始位置0%,結束顏色 結束位置	10%,....)
/*顏色可以寫多組*/

5. 背景圖

設定背景圖
```
background-image:url("imgs/bg-1.jpg")
```

設定背景平鋪

background-repeat
a). 預設情況下，背景圖會鋪滿整個頁面，背景圖大小不夠鋪滿整個頁面時，背景圖會在橫座標和縱座標中進行重複；
b). background-repeat：repeat 預設值，橫、縱座標重複
c). background-repeat：round  會將圖片縮放之後再平鋪，達到鋪滿整個容器的效果
d). background-repeat：space  圖片不會縮放平鋪，只會在圖片之間產生相同的間距值，達到鋪滿整個容器的效果
d). background-repeat：no-repeat（不重複）
e). background-repeat：repeat-x（只在x軸重複）、y（也一樣）**

設定滾動容器的背景的行為(是否固定)

background-attachment
A. 跟隨元素滾動：background-attachment:scroll;
B. 固定不動：background-attachment:fixed;
C. 跟隨內容滾動：background-attachment:local;

設定背景圖的尺寸

background-size
a). background-size：contain 圖片要完整的顯示在指定的區域，不能改變圖片的比例
b). background-size：cover 圖片撐滿整個指定區域，而且比例不變，可能會溢位
c). background-size：100% 橫向撐滿，縱向按比例縮放。百分比相對於盒子
d). background-size：100% 100% 橫、縱向撐滿，圖片比例可能會發生變化。
f). background-size：x y 可以設定數值代表橫、縱向的畫素尺寸。

設定背景圖位置

background-position
a). background-position：center 背景圖橫、縱向居中
b). background-position：center top 橫向居中，縱向靠上
c). background-position：center bottom 橫向居中，縱向靠下
d). background-position：left center 橫向靠左，縱向居中
e). 預設值： left、bottom、right、top、center（居中）
f). 也可以用數值或百分比如background-position：10px 10px 表示橫、縱座標離左邊、上邊邊框的距離;

設定背景圖座標的原點

background-origin
a). background-origin:border-box 從邊框開始填充背景，會與邊框重疊
b). background-origin:padding-box 從填充區開始填充背景，覆蓋填充盒（為預設值）
c). background-origin:content-box 從內容區域開始填充

設定內容的裁切，控制顯示

background-clip
a). background-clip:border-box 顯示border及以內的內容
b). background-clip:padding-box 顯示padding及以內的內容
c). background-clip:content-box 只顯示內容區

速寫（簡寫）background

A. background：url("imgs/main.jpg") no-repeat 50% 50%/100% fixed #000 順序為設定圖片、不重複、
   位置、尺寸、視口、背景顏色，因為位置和尺寸都有可能為百分比，所有瀏覽器規定尺寸必須寫在位置後面中
   間加/隔開。有些屬性可以不寫，不寫會按預設值處理
B. background：背景顏色、背景圖片地址、背景平鋪、背景固定、背景位置、背景圖片尺寸

有含義的背景圖，需要在元素裡新增文字

1. 在網速不好的時候，載入不出來CSS屬性的時候，會顯示文字；
2. 在網速正常的時候，能載入CSS屬性，則顯示圖片；
3. 所以書寫程式碼的時候需要新增文字，然後隱藏文字；
4. 方法一.文字縮排：text-indent：px，文字不換行：white-space：nowrap；把文字擠出到盒子外面， 
然後隱藏溢位：overflow：hidden；
5. 方法二.背景可以覆蓋內邊距，高度設定為0，padding-top內邊距設定為原先高的值，這樣背景圖正常顯示，
文字就在盒子外面，然後隱藏溢位：overflow：hidden；
6. 方法三，把文字用span元素包裹起來，然後隱藏span盒子。

6. 邊框圖片

設定邊框圖片路徑

border-image-source:url("./images/a.jpg");
/*可以指定邊框圖片的路徑，預設只是填充到容器的四個角*/

設定四個方向上的裁切距離

border-image-slice:27 fill;
/*第一個引數為數值是四個方向的裁切距離
 第二個引數fill是做內容的內部填充*/

設定邊框圖片的寬度

border-image-width:27px;
/*建議：一般設定為邊框的寬度
 注意：邊框圖片的本質是背景，並不會影響元素內容的放置
內容只會被容器的border和padding影響*/

設定邊框圖片的平鋪

border-image-repeat:
/*取值：repeat 直接重複平鋪
      round 將內容縮放進行完整的重複平鋪
      stretch 拉伸，預設值*/

縮寫（簡寫）

border-image: 圖片連結 裁切距離 / 圖片寬度 / 設定平鋪