漸層

• linear-gradient：漸層屬性，可以從 background 套用
  • 方向：預設未寫為上至下 to bottom，也可寫成角度，從上以 0 開始，順時鐘增加
    • to top：等同 0deg
    • to right：等同 90deg
    • to bottom：等同 180deg
    • to left：等同 270deg
  • 顏色 1、顏色 2：代表從顏色 1 漸層至顏色 2，可以增加多組顏色
  • 位置：比例，預設未寫為等比例分配，初始的顏色 1 為 0%，結束的顏色 2 為 100%
• 可能有時候目標的瀏覽器未支援，就要在前面加上識別資料(以我的理解，現在似乎常見的瀏覽器都有支援了)
  • -webkit-linear-gradient：Chrome、Safari
  • -o-linear-gradient：Opera
  • -moz-linear-gradient：Firefox
• 另外有放射漸層(radial-gradient)等，可以點選參考資料的連結

練習，先建一個 box ，再試試看各種不同參數呈現出來的效果(其他未使用要先註解)

<div class="box">
</div>

.box {
    height: 100px;
    width: 100px;
    background: linear-gradient(red, blue);
    background: linear-gradient(to right, red, blue);
    background: linear-gradient(45deg, red, blue);
    background: linear-gradient(to left, red 20%, blue 80%);
}

CSS 權重

• 權重大小：大的蓋過小的
  • Tag： 1 分
  • Class： 10 分
  • ID： 100 分
  • HTML style： 1000 分
    • <p style="color"> </p>
  • !import： 10000 分
    • color:blue !important;
• inline style > ID > Class > Element > *
• 權重相同時，後面的會蓋掉前面的
• 2 種以上一起，相加，如 .header p 為 10 + 1 = 11

參考資料

• 深入理解 CSS 漸層 ( CSS Gradient )
• linear-gradient()
• CSS Gradients
• Day20：小事之 CSS 權重 (css specificity)

次回

預計說明一些圖片相關的部分