【CSS】漸層色塊

漸層原理説明

撰寫漸層時,要指定多組參數。每一組參數要有〖顏色〗與〖%數〗

.box
.box
 width: 500px
 height: 200px
 //left: 指定〖從左〗開始漸層 
 background: linear-gradient(left, DarkGreen 20%, MediumSeaGreen 70%)

▼示意圖

  • 第1組參數:〖起始色〗深綠色、〖%數〗20%
    0%~20% →深綠色純色區
  • 第2組參數:〖終色〗淺綠色、〖%數〗70%
    20%~70%→漸層區域
    70%~100%→淺綠色純色區

色塊

漸層區的定義是「第1個%」與「第2個%」之間的區塊,
所以如果「第2個%」指定跟「第1個%」一樣的數字,就無法產生漸層區,會形成色塊。

線性漸層色塊

.lg-box
.lg-box
 width: 300px
 height: 100px
 border: 1px solid #000
 background: linear-gradient(Left, Teal 50%, transparent 50%)

Display

圓形漸層色塊

圓形漸層如果參數指定的剛剛好一樣,會有顏色轉換處會有鋸齒產生,所以需要預留數%的漸層空間

.rd-box
.rd-box
 width: 200px
 height: 200px
 border-radius: 100%
 border: 1px solid #000
 background: radial-gradient(Teal 49.5%, transparent 50%)//預留0.5%的漸層空間

Display

Leave a Reply

Your email address will not be published. Required fields are marked *