• 前言

這裡主要介紹下css中background和radial-giadient徑向漸變的使用，工作中用到的地方可能也不太多，但是每次用到了都需要查閱官網，查資料就比較麻煩，這裡記錄一下我自己整理的常見用法，方便日後使用吧！這裡省去了一些特別特別基礎的使用語法。

---

• 目錄

1. 自己根據兩個屬性實現的一些簡單的效果
2. background的語法使用
3. radial-giadient的語法使用

---

• 正文

1. 根據background和radial-gradient實現的一些簡單效果

　　　 　　　　　　　　　　 　　　　　　　　　　　　　　　　　　　　　　

　　2.background的語法使用

　　　　background屬性

• • • background-color : 定義元素的背景顏色
      • • background-color設定的只是背景顏色，background設定的是整個背景
        • 當元素本身設定了background-img屬性時，如果設定了background-color,圖片不會被覆蓋，background-color會在image底層，而過設定的是background，那麼圖片會被覆蓋掉
    • background-image：定義圖片為背景，多張圖片時需要寫多個url
      • • 當設定了visibility:hidden與display:none對background-image的影響 background-image對應的是一張靜態資源圖片，當頁面渲染前會請求這張圖片的資源來進行載入渲染 visibility:hidden元素仍然再dom樹中，只是不顯示而已，display:none,元素不存在與dom樹中 當元素visibility：hidden時，這張圖片資源仍然會請求，但是顯示不出來，當設定了display:none這張圖片不會請求，也不會顯示 一種特殊場景如果也i按出現了滾動條，那麼滾動條下面（即檢視之外）的background-image靜態資源回不回請求呢，答案是會的，只要元素存在與dom樹上，不論顯示還是隱藏，其一欄的background-image資源都將會請求回來
    • background-position：設定圖片的起始位置，定義的background-image在容器中的位置，對background-color無效
    • background-repeat：設定背景圖片是否以及如何平鋪，值針對background-image的平鋪，對background-color無效
    • background-size：設定背景圖片的尺寸，有四種植，如果要設定size的值，需要緊跟在position後面並且用"/"隔開
      • • 　length：設定【怕【影象的高寬，圖片會根據高寬發生扭曲，通常使用的時候只需要設定一個值，以免圖片發生扭曲
        • percentage：以父元素的百分比設定高寬，同上
        • cover 把背景圖片擴充套件到足夠大，以使背景圖片覆蓋整個背景區域，影象不會發生扭曲，內容區域全部有背景圖片，但是可能背景圖片不全，只是其中的一部分
        • contain ：設定背景圖片擴充套件到最大尺寸，使得其高寬全適應內容區域，圖片不會發生扭曲，但是肯能一部分割槽域沒有背景圖
    • background-origin：設定背景圖片的背景區域
      • • border-box：預設值，背景繪製在邊框的方框內
        • padding-box：背景繪製在襯距方框內
        • content-box：背景繪製在內容方框內
    • background-clip：規定背景的繪製區域
    • • border-box：預設值，背景繪製在邊框的方框內
      • padding-box：背景繪製在襯距方框內
      • content-box：背景繪製在內容方框內
    • background-attachment：設定背景影象是否固定或者隨著頁面的滾動而滾動，定義background-image是否跟隨容器的滾動而滾動，對background-color無效
      • • scroll:預設值，背景影象會隨著頁面其餘部分的滾動而滾動
        • fixed:當頁面的其餘部分滾動時，背景影象不會移動
        • inherit:規定應該從父元素繼承background-attachment屬性的設定 　　　　

實現上面第一個效果的寫法：　　　　　

.mydiv{ width:500px; height:500px; margin:500pxauto; border:10pxsolidpink; background-color:salmon; background-image:url(../img/myflaw.png),url(../img/paper.png); background-position:centercenter,rightbottom; background-repeat:no-repeat,repeat; background-attachment:inherit; }

補充一個transparent常見用法
　　　　background:transparent代表背景透明 　 使用場景：如果一個元素在另一個元素之上，而你想顯示下面的元素，這時你就需要把上面的元素的bangckground設定為transparent，這就像常見的你點選儲存二維碼一樣，有時候其實是兩張圖片，你看到的是下面的一張圖片，點選儲存的是上面的二維碼的圖片。

　　3.radial-giadient的語法使用

• 　　 radial-gradient函式用於徑向漸變建立影象

• 語法：background:radial-gradient(shapesizeatposition,start-color,…,last-color);

　　 徑向漸變由中心點定義 為了建立徑向漸變你必須設定兩個終止色

• 三個引數

　　shape:確定圓的型別：elipse：預設值，指定橢圓形的徑向漸變circle：指定圓形的徑向漸變 　　size:定義漸變的大小，可能值： farthest-corner:(預設),指定徑向半徑長度從圓心到離圓心最遠的角 closest-side:指定徑向漸變的半徑長度從圓心到離圓心最近的邊 closest-corner:指定徑向漸變的半徑長度為從圓心到離圓心最近的角 farthest-side:指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊 　　positiond定義漸變的位置，可能值： center:（預設）設定中間為徑向漸變圓心的座標值 top：設定頂部為徑向漸變的縱座標值 bottom:設定底部為徑向漸變的原型的縱座標值 　　start-color,....,last-color用於徑向漸變的起止顏色 常見的用法一：效果圖上圖2

 <div class="mydiv">
        <div class="innerdiv">
            <div>123456789</div>
            <div>123456789</div>
        </div>
    </div>


 .mydiv{
            height: 220px;
            width: 220px;
            border: 1px solid pink;
            padding: 10px;
            margin: 0 auto;
            background: radial-gradient(transparent  10px, powderblue  10px);
            background-size: 22px 22px;
            background-position: 10px 10px;
            box-shadow: 0 4px 16px #333333;
        }
        .innerdiv{
            height: 220px;
            background-color: powderblue;
        }

常見的用法二：效果圖上圖3

<div class="wrap">
        500元
 </div>


.wrap{
            position: relative;
            margin: 100px auto;
            height: 160px;
            width: 400px;
            background-image: radial-gradient( circle at 0.5px 8px ,transparent 6px,#ff9e6d 6px,#ff9e6d),radial-gradient( circle at 199.5px 8px ,transparent 6px,#ff9e6d 6px);
            background-size: 200px 18px;
            background-position: 0 0 , 200px 0;
            background-repeat: repeat-y;
            font-size: 60px;
            color: #fff;
            font-weight: bold;
            line-height: 160px;
            padding-left: 40px;
            box-sizing: border-box;
            cursor: pointer;
        }
        .wrap::before {
            position: absolute;
            content: "";
            left: 240px;
            top: 0;
            bottom: 0;
            width: 0;
            border-left: 1px dashed #fff;
        }
        .wrap::after {
            position: absolute;
            content: "立即領取";
            font-size: 26px;
            width: 70px;
            top: 50%;
            right: 2%;
            transform: translate(-50%, -50%);
            line-height: 40px;
            letter-spacing: 5px;
        }

常見的用法三：效果圖上圖4

<div class="color-text">
        hello world!
</div>



.color-text{
            width: 700px;
            font-size:100px; 
            font-weight: 600; 
            background:-webkit-linear-gradient(left, #FB1616, #F3167C 10%, 
            #5A28F3 20%,#2099EF 30%, #096B7B 40%,#5EE626 50%, #B7D416 60%, 
            #E0AC1A 70%, #EF6F14 80%,#B90F4E 90% );
            color:transparent;
            /* 以區塊內的文字作為裁剪區域向外裁剪，文字的背景即為區塊的背景，文字之外的區域都將被裁剪掉。 */
            -webkit-background-clip: text;
            margin: 100px auto;
        }

還有很多炫酷的用法，比如電子回單裡面邊框條紋，信封的手撕特效都是由css完成的，歡迎各位大佬提出寶貴的意見。