CSS3-背景篇

1. 文字陰影text-shadow

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

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

2. 盒子陰影box-shadow

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

2. 語法：

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

3. 屬性：

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

4. 注意：

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

5. 案例：

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

3. 顏色設定

1. RGBA 說得簡單一點就是在RGB的基礎上加進了一個Alpha透明度
   語法:
   R：紅色值。正整數 | 百分數
   G：綠色值。正整數 | 百分數
   B：藍色值。正整數 | 百分數
   A：透明度。取值0~1之間

   /*比如紅色*/
   background: rgba(255, 0, 0, 1);
   

2. 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. 背景漸變

1. 概述： 漸變是CSS3當中比較豐富多彩的一個特性，通過漸變我們可以實現許多炫麗的效果，有效的減少圖片的使用數量，並且具有很強的適應性和可擴充套件性。

2. 漸變可分為線性漸變、徑向漸變

3. -webkit-linear-gradient 前面加上瀏覽器私有字首-webkit-，起始位置引數不用寫to，方向與有to引數相反

4. 線性漸變
   概述： 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. 第三個引數是終點顏色，你還可以在後面新增更多的引數，表示多種顏色的漸變
   

5. 徑向漸變
   概述： 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. 前三個引數為可選項
   

6. 重複漸變
   用徑向漸變做:

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

5. 背景圖

1. 設定背景圖

   background-image:url("imgs/bg-1.jpg")
   

2. 設定背景平鋪

   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（也一樣）**
   

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

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

4. 設定背景圖的尺寸

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

5. 設定背景圖位置

   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 表示橫、縱座標離左邊、上邊邊框的距離;
   

6. 設定背景圖座標的原點

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

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

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

8. 速寫（簡寫）background

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

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

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

6. 邊框圖片

1. 設定邊框圖片路徑

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

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

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

3. 設定邊框圖片的寬度

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

4. 設定邊框圖片的平鋪

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

5. 縮寫（簡寫）

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