效果實現

1. box-shadow

• box-shadow: 5px 5px 10px 0 rgba(0,0,0,.2); 
  box-shadow: inset 5px 5px 10px 0 rgba(0,0,0,.2); 
  

    - 左右偏移 上下偏移 模糊大小 	陰影大小 顏色
  

2. text-shadow

• text-shadow: 0 0 2px white;
  

    - 左右偏移 左右偏移 陰影大小 顏色
  

3. border-radius

• border-radius: 10px; 
  border-radius: 50%; 
  border-radius: 10px 10px 10px 10px / 20px 20px 	20px 20px;
  

    - 橫/豎
  

4. background
   1. 實現圖標切換

      .i{
          width: 20px;
          height: 20px;
          background: url(./background.png) no-repeat;
          background-size: 20px 40px;
          transition: background-position .4s;
      }
      .i:hover{
          background-position: 0 -20px;
      }
      

       - 需將兩個圖標放在一起
       - transition：實現切換的動畫效果
       - .4s：時間
      

   2. background-size: contain;
      

       - contain：保持圖片原有比例不變，會有空白
       - cover：圖片覆蓋整個區域
      

5. clip-path
   1. 裁剪

      	clip-path: inset(100px 50px);
      	clip-path: circle(50px at 100px 100px); 
      	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px); 
      

       - inset 向內裁剪 上下裁剪像素 左右裁剪像素
       - circle 圓形裁剪 半徑 at 左右偏移 上下偏移
       - polygon 多邊形裁剪
       - 裁剪都可以用 百分比和像素
      

   2. 變化裁剪

      clip-path: circle(50px at 100px 100px);
      .container:hover{
           clip-path: circle(80px at 100px 100px);
      }
      

   3. svg

      	clip-path: url(#clipPath);
         <svg>
              <defs>
                  <clipPath id="clipPath">
                      <!-- <circle cx="60" cy="60" r="50" fill="#34538b" /> -->
                      <polygon stroke="#979797" points="0.4921875 81.2070313 92.640625 81.2070313 121.601562 0.21875 153.648437 81.2070313 247.390625 80.7734375 173.394531 140.496094 200.308594 227.09375 121.601562 172.71875 53.4960937 227.09375 80.859375 140.496094"></polygon>
                  </clipPath>
              </defs>
          </svg>