box-shadow

• box-shadow作用
  • 營造層次感（立體感）
  • 充當沒有寬度的邊框
  • 特殊效果（一個div畫圖形）
• box-shadow屬性
  • box-shadow:64px 64px 24px 40px rgba(0,0,0,0.4)
  • 前兩個值為偏移量
  • 第三個值為陰影模糊區(qū)域大小
  • 第四個值為陰影擴展區(qū)域大小
    • 模糊，是實的,一般為0
    • 把偏移模糊都設(shè)為0，只設(shè)置陰影擴展區(qū)域大小，就相當于邊框
    • 設(shè)置偏移和陰影擴展區(qū)域大小，就像元素的復(fù)制(設(shè)為負值變小)
  • 第五個值為陰影顏色
  • 如果是內(nèi)陰影，再加inset

text-shadow

• text-shadow作用
  • 立體感
  • 印刷品質(zhì)感
• text-shadow屬性
  • text-shadow:1px 1px 0 rgba(0,0,0,0.2)
  • 前兩個值為偏移
  • 第三個值為模糊區(qū)域大?。〞心诩埳系挠∷⒏校?/li>
  • 字和背景顏色一致時，可以給四個方向都設(shè)置偏移，造成鏤空字的感覺

border-radius

• border-radius作用

  • 圓角矩形
  • 圓形
  • 半圓、扇形
  • 一些奇怪的圖形

• border-radius屬性

  • border-radius:10px(圓角矩形)
  • border-radius:50%(正方形變圓,有邊框border，邊框也是圓)
  • border-radius:10px/20px(變橢圓)

• 利用boder-radius畫特殊圖形

  • 圓形：元素的寬高相同，且圓角半徑為寬高的一半

  div{
      width: 100px;
      height: 100px;
      border-radius: 50%;
  }
  

  • 半圓:元素寬高不同，且圓角半徑與寬高要配合

  div{
      width: 100px;
      height: 50px;
      border-radius: 50px 50px 0 0;
  }
  

  • 扇形：元素寬高及一個圓角半徑相同

  div{
      width: 50px;
      height: 50px;
      border-radius: 50px 0 0 0;
  }    
  

  • 橢圓:元素寬高不同，且水平和垂直半徑分別對應(yīng)寬高

  div{
      width: 120px;
      height: 80px;
      border-radius: 120px/80px;
  }            
  

background

• background作用
  • 紋理
  • 圖案
  • 漸變
  • 雪碧圖動畫
    • 雪碧圖中兩張圖排列在一起，通過background-position,實現(xiàn)兩圖切換
  • 背景圖尺寸適應(yīng)方案
    • background-position:center center (背景圖在容器水平垂直居中)
    • background-size：背景圖大小，默認會在容器重復(fù)，可以通過background-repeat來設(shè)置重復(fù)
    • background-size:cover 覆蓋整個容器，且保證圖片長寬比不變，超出部分隱藏
    • background-size:contain 完整顯示圖片，且保證圖片長寬比不變，不夠的部分空白

clip-path

• clip-path作用

  • 對容器進行裁剪
  • 常見幾何圖片
  • 自定義路徑

• clip-path屬性

  • 不改變?nèi)萜鞔笮?/li>
  • 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);多邊形，定義幾個坐標（可用百分比和像素）
  • 自定義路徑(利用svg矢量圖)

  clip-path: url(#clipPath);
  <svg>
      <defs>
          <clipPath id="clipPath">
              <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>
  

3D變換

• 變換 transform
  • translate 位移
  • scale 縮放
  • skew 斜切
  • rotate 旋轉(zhuǎn)
• 設(shè)置perspective屬性// 觀看位置距離盒子的距離
• 設(shè)置transform-style:perserve-3d
• 利用translateX/translateY/translateZ
• 利用rotateX/rotateY