效果实现

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>