iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 25
1
Modern Web

HTML 與 CSS 學習筆記系列 第 25

Day25 - CSS (6) - 漸層、權重

漸層

  • 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

參考資料

次回

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


上一篇
Day24 - CSS (5) - 圓弧、陰影
下一篇
Day26 - HTML 與 CSS (8) - 背景圖片
系列文
HTML 與 CSS 學習筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言