摘要：不在指定漸變區(qū)域的，以距離其最近的顏色填充。設(shè)置漸變?yōu)閺挠业阶?。這是默認(rèn)值，等同于留空不寫。最后奉上一碗純拉面。

Talk is cheap.Show me the code.

 

 .chopsticks{
      position: absolute;
      left: 400px;
      top: 80px;
      width: 10px;
      height: 250px;
      background-color: #bb8855;
      border-radius: 3px;
      -webkit-border-radius: 3px;  
      box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2),inset 0 -5px 2px 0 rgba(0,0,0,0.1);
      z-index: 99;
  }
    .chopsticks:before{
        content: "";
        position: absolute;
        left: 20px;
        top: 0px;
        width: 10px;
        height: 250px;
        background-color: #bb8855;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2),inset 0 -5px 2px 0 rgba(0,0,0,0.1);
        z-index: 99;
    }

【注】：box-shadow是由逗號(hào)分隔的陰影列表,每個(gè)逗號(hào)隔開的便是一個(gè)陰影，每個(gè)陰影由 2-4 個(gè)長度值、可選的顏色值以及可選的 inset 關(guān)鍵詞來規(guī)定，可給每個(gè)class添加一個(gè)或多個(gè)陰影。陰影的顏色是任意的，所以陰影有很多妙用。

 


.egg{
        position: absolute;
        top: 20px;
        left: 35px;
        width: 80px;
        height: 100px;
        z-index: 7;
        border-radius: 50% / 60% 60% 40% 40%;
        -webkit-border-radius:50% / 60% 60% 40% 40%;        
        background-color: #fff;
        transform:rotate(20deg);
    }
   .egg:before{
        content: "";
        position: absolute;
        top: 30%;
        left: 24%;
        width: 50%;
        height: 50%;
        z-index: 7;
        border-radius: 50%;
        -webkit-border-radius:50%;
        background: #FC0;
        box-shadow: 0 0 2px 2px #f90,inset 0 0 5px 1px rgba(255, 153, 0, 0.5);
        }

【注】：border-radius

一個(gè)值，border-radius:50px;表示水平半徑和垂直半徑相等；
兩個(gè)值：border-radius:100px / 50px;"/"前的值表示水平半徑，"/"后的值表示垂直半徑，兩個(gè)值 的順序與一個(gè)值的順序相同：左上，右上，右下，左下。

css3還提供了對每個(gè)角進(jìn)行設(shè)置：

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

（demo可參考下面的圖，碗和面條都是用徑向漸變實(shí)現(xiàn)的）

 background-image:radial-gradient(ellipse at center center, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.1) 21%, #ffcc33 21%, #ffcc33 23%, rgba(0, 0, 0, 0.1) 23%, rgba(0, 0, 0, 0) 24%)
 background-image:-webkit-radial-gradient(center center,ellipse, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.1) 21%, #ffcc33 21%, #ffcc33 23%, rgba(0, 0, 0, 0.1) 23%, rgba(0, 0, 0, 0) 24%)

【要點(diǎn)】：

radial-gradient(漸變形狀 at 漸變圓心，漸變顏色 [顏色漸變開始位置(距離漸變圓心的大小)],漸變顏色[顏色漸變位置])

-webkit-radial-gradient(漸變圓心，漸變形狀，漸變顏色 [顏色漸變開始位置(距離漸變圓心的大小)],漸變顏色 [顏色漸變位置])

顏色漸變位置不寫時(shí)，默認(rèn)第一個(gè)顏色位置是0，第二個(gè)是100%。

不在指定漸變區(qū)域的，以距離其最近的顏色填充。

（demo可參考下面的圖，海苔是用線性漸變實(shí)現(xiàn)的）

   background-image: linear-gradient(-20deg, rgba(0, 0, 0, 0.9) 50%, rgba(0, 34, 0, 0.95) 95%);
   background-image: -webkit-linear-gradient(110deg, rgba(0, 0, 0, 0.9) 50%, rgba(0, 34, 0, 0.95) 95%);

【要點(diǎn)】：可用方向或角度值指定漸變的方向（或角度）。
to left：設(shè)置漸變?yōu)閺挠业阶蟆Ｏ喈?dāng)于: 270deg
to right：設(shè)置漸變從左到右。相當(dāng)于: 90deg
to top：設(shè)置漸變從下到上。相當(dāng)于: 0deg
to bottom：設(shè)置漸變從上到下。相當(dāng)于: 180deg。這是默認(rèn)值，等同于留空不寫。

最后奉上一碗純css拉面。

【注】： 拉面原創(chuàng)出處：https://codepen.io/aaronchuo/pen/GLEed