目錄
線性漸變
重復性線性漸變
徑向漸變
重復性徑向漸變的使用
線性漸變
- 線性漸變是向下、向上、向左、向右、對角方向的顏色漸變。
其語法格式為：
background-image: linear-gradient(side-or-corner|angle, linear-color-stop);參數說明如下：
- side-or-corner 是描述漸變線的起始位置，它包含兩個關鍵詞：第一個指出水平位置 left or
right，第二個指出垂直位置 top or bottom。 - angle 是用角度值來指定漸變的方向。
- linear-color-stop 是設置漸變的顏色值。
<style>#linear {display: flex;}/*從上到下線性漸變*/.gradient1 {width: 100px;height: 100px;background-image: linear-gradient(#ff577f, #c6c9ff);}/*從左到右線性漸變*/.gradient2 {margin-left: 10px;width: 100px;height: 100px;background-image: linear-gradient(to right, #ff9d72, #c6c9ff);}/*從左上角到右下角的漸變*/.gradient3 {margin-left: 10px;width: 100px;height: 100px;background-image: linear-gradient(to bottom right, #8ad7c1, #c6c9ff);}/*定義角度的漸變*/.gradient4 {margin-left: 10px;width: 100px;height: 100px;background-image: linear-gradient(50deg, #bc6ff1, #ffd5cd);}
</style><div id="linear"><div class="gradient1"></div><div class="gradient2"></div><div class="gradient3"></div><div class="gradient4"></div>
</div>
重復性線性漸變
- 重復性線性漸變是用重復的線性漸變組成的 ，它與線性漸變的區別在于，它會在所有方向上重復漸變來覆蓋整個元素。 其語法格式為：
background-image: repeating-linear-gradient(side-or-corner|angle, color-stop);參數說明如下：
- side-or-corner 是描述漸變線的起始位置，它包含 to 和兩個關鍵詞：第一個指出水平位置 left or right，第二個指出垂直位置 top or bottom。
- angle 是用角度值來指定漸變的方向。
- color-stop 是由一個 組成，并且跟隨一個可選的終點位置。
<style>div {width: 200px;height: 200px;display: inline-block;margin-left: 20px;margin-top: 20px;}.item1 {background-image: repeating-linear-gradient(45deg,#8843f8 0%,#ef2f88 5%,#f47340 10%,#f9d371 15%);}.item2 {background-image: repeating-linear-gradient(to left top,#8843f8 0%,#ef2f88 5%,#f47340 10%,#f9d371 15%);}
</style><div class="item1"></div>
<div class="item2"></div>
徑向漸變
- 徑向漸變是由元素中間定義的漸變。 其語法格式為：
background-image: radial-gradient(shape, color-stop);參數說明如下：
- shape 設置漸變的形狀，其取值有 circle（圓形） 和 ellipse（橢圓）。
- color-stop 設置某個確定位置的顏色值。
<style>body {padding: 50px;background: #000;}#radial {display: flex;}/*均勻分布徑向漸變*/.gradient1 {width: 150px;height: 150px;background-image: radial-gradient(#ff577f, #c6c9ff, #8ad7c1);}/*不均勻漸變*/.gradient2 {margin-left: 10px;width: 150px;height: 150px;background-image: radial-gradient(#8bcdcd 5%, #ff9d72, #c6c9ff);}/*橢圓形漸變*/.gradient3 {margin-left: 10px;width: 150px;height: 150px;background-image: radial-gradient(ellipse, #8ad7c1, #c6c9ff, #fce2ce);}/*圓形漸變*/.gradient4 {margin-left: 10px;width: 150px;height: 150px;background-image: radial-gradient(circle, #bc6ff1, #ffd5cd, #b6eb7a);}
</style><div id="radial"><div class="gradient1"></div><div class="gradient2"></div><div class="gradient3"></div><div class="gradient4"></div>
</div>
重復性徑向漸變的使用
- 重復性徑向漸變是用重復性的徑向漸變組成的圖像。它與徑向漸變的區別在于，它會從原點開始重復徑向漸變來覆蓋整個元素。其語法格式為：
background: repeating-radial-gradient(extent-keyword, color-stop);參數說明如下：
- extent-keyword 是描述邊緣輪廓的具體位置，關鍵字常量如下所示：
- color-stop 是某個確定位置的固定顏色值。
| Keyword | Description |
| closest-side | 漸變的邊緣形狀與容器距離漸變中心最近的一邊相切（圓形）或者至少與距離漸變中心最近的垂直和水平邊相切（橢圓） |
| closest-corner | 漸變的邊緣形狀與容器距離漸變中心點最近的一個角相交 |
| farthest-side | 與closest-side相反，邊緣形狀與容器距離漸變中心點最遠的一邊相切（或最遠的垂直和水平邊） |
| farthest-corner | 漸變的邊緣形狀與容器距離漸變中心最遠的一個角相交 |
<style>div {width: 200px;height: 200px;display: inline-block;margin-left: 20px;margin-top: 20px;}.gradient1 {background: repeating-radial-gradient(closest-corner,#8843f8 0%,#ef2f88 5%,#f47340 10%,#f9d371 15%);}.gradient2 {background: repeating-radial-gradient(farthest-side,#8843f8,#ef2f88,#f47340,#f9d371);}
</style><div class="gradient1"></div>
<div class="gradient2"></div>
?
)
