一、圓角

• border-radius: 圓角

 - border-radius: 10px;  即四個邊角都一樣
 - border-radius: 10px 20px;  對角即左上&右下    右上&左下
 - border-radius: 10px 20px 30px; 即左上、 右上&右下 、左下
 - border-radius: 10px 20px 30px 40px;  即左上角開始，順時針(左上、右上、右下、左下)

  備注: 
    正方形設(shè)置成圓形 border-radius: width/2; 【border-radius: 50%;  】
    矩形設(shè)置成橢圓 border-radius: (width/2) / (height/2);

二、線性漸變

• linear-gradient線性漸變

  語法: 
    linear-gradient([<起點> || <角度>,]? <點>, <點>…)
  參數(shù):
    起點: 從什么方向開始漸變(默認(rèn)top)left/right/top/bottom
    角度: 從什么角度開始漸變(xxxdeg)
    點: 漸變點的顏色和位置(black 50%，位置可選)

  background: linear-gradient(red, blue);
  background: linear-gradient(left top, red, blue);  // 左上角開始
  background: linear-gradient(30deg, red, blue);  // 起點為0，逆時針30度
  background: linear-gradient(30deg, red, blue, yellow);  // 后續(xù)添加多個顏色點
  background: linear-gradient(30deg, red 10px, blue 40px, yellow 80px, purple 140px, pink 200px, black 260px, gray 300px, red 360px);  // 顏色具體的位置點
background: linear-gradient(30deg, red 0, black 30%, blue 60%);  // 位置的百分比

瀏覽器的內(nèi)核，主要有 Mozilla（Firefox，F(xiàn)lock等）、WebKit（Safari、Chrome等）、Opera（Opera瀏覽器）、Trident（萬惡的IE瀏覽器）
background: -webkit-linear-gradient(left top, red, blue); // Mozilla
background: -moz-linear-gradient(left top, red, blue); // WebKit
background: -ms-linear-gradient(left top, red, blue); // Trident
background: -o-linear-gradient(left top, red, blue); // Opera
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1'); // IE低版本通過濾鏡來處理，而且也只能是線性漸變(GradientType方向: 0從上到下，1從左到右)
background: -o-linear-gradient(left top, red, blue); // Opera
*** background: linear-gradient(30deg, red, blue); 【標(biāo)準(zhǔn)的語法1】***
*** background: linear-gradient( to left, red, blue); 【標(biāo)準(zhǔn)的語法2】***

• repeating-linear-gradient重復(fù)線性漸變

  // 以0~40px漸變樣式，進(jìn)行平鋪
  background: repeating-linear-gradient(30deg, red 0, black 40px);

案例: 進(jìn)度條

三、徑向漸變

• radial-gradient 徑向漸變

  語法: 
    radial-gradient([<起點>]? [<形狀> || <大小>]? <點>, <點>…);
  參數(shù): 
     起點: 可以是關(guān)鍵字（left,top,right,bottom），具體數(shù)值或百分比
     形狀: ellipse(圓形)、circle(橢圓形)
     大小: 具體數(shù)值或百分比，也可以是關(guān)鍵字
          半徑為從圓心到最近端closest-side
          半徑為從圓心到最近角closest-corner
          半徑為從圓心到最遠(yuǎn)端farthest-side
          半徑為從圓心到最遠(yuǎn)角farthest-corner
          包含contain
          覆蓋cover

  background: -webkit-radial-gradient(red, blue);
  background: -webkit-radial-gradient(100px 50px, circle ,red, blue);
  background: -webkit-radial-gradient(100px 50px, circle closest-side,red, blue);
  background: -webkit-radial-gradient(100px 50px, 50px 20px,red, blue);

四、背景

• 多背景

  // 用逗號隔開
  background: url(qq.png) no-repeat 10px 30px, url(bt.png) no-repeat right top ;

• 背景尺寸

  語法: background-size:x y

  background-size: 100% 100%;  // 背景和盒子大小一致
  background-size: 30px 30px;
  background-size:40px 40px, 20px 20px;  // 對多張背景大小進(jìn)行設(shè)置

• 背景原點

  語法: 
    background-origin: border-box/padding-box/content-box
    - border-box: 從border區(qū)域開始顯示背景
    - padding-box: 從padding區(qū)域開始顯示背景
    - content-box: 從content區(qū)域開始顯示背景

• 背景剪切

  語法:   
    background-clip: border-box/padding-box/content-box/no-clip
    - border-box： 從border區(qū)域向外裁剪背景
    - padding-box： 從padding區(qū)域向外裁剪背景 
    - content-box： 從content區(qū)域向外裁剪背景 
    - no-clip： 從border區(qū)域向外裁剪背景

背景以文本內(nèi)容進(jìn)行剪切
-webkit-background-clip: text;
color: rgba(0,0,0,0);

五、遮罩

• -webkit-mask-image: 圖片地址
• -webkit-mask-position: 圖片位置
• -webkit-mask-repeat: 平鋪方式

  // 和背景圖設(shè)置類似
  -webkit-mask: url(mask.png) no-repeat left bottom;