CSS Webkit Linear Gradient指CSS樣式中，用於設置網頁元素背景的一種線性漸變的代碼方法。在網頁設計中，常常會用到漸變來實現某些特殊的效果，Webkit Linear Gradient則是一種簡單實用的方法。
一、基本使用方式
Webkit Linear Gradient的基本代碼如下：
background: -webkit-linear-gradient(direction, color-stop1, color-stop2, ...);
其中direction表示漸變的方向，可以是關鍵詞top、left、right、bottom，也可以是一定角度的數值，例如45deg表示從左下到右上。color-stop表示漸變的顏色點，可以有多個，每個顏色點由一個顏色值和對應的位置構成。
例如，我們使用下面的代碼設置一個從左上角到右下角的漸變顏色：
background: -webkit-linear-gradient(left top, #FFAFBD, #ffc3a0);
效果如下圖：
二、多個顏色點與顏色模式
在Webkit Linear Gradient中，可以通過添加多個顏色點，來實現更加複雜的漸變效果。
例如，我們使用下面的代碼設置一個從左邊到右邊漸變，並垂直劃分為三段顏色的效果：
background: -webkit-linear-gradient(left, #FFAFBD 0%, #ffc3a0 40%, #FFAFBD 70%, #ffc3a0 100%);
效果如下圖：
在多個顏色點中，我們可以加入顏色的模式（color-stop），控制顏色漸變的方式。
例如，我們使用下面的代碼設置一個從左到右色彩分明、邊緣清晰的線性漸變：
background: -webkit-linear-gradient(left, #00bcd4 0%, #00bcd4 25%, #49c1a2 25%, #49c1a2 50%, #F5B041 50%, #F5B041 75%, #E74C3C 75%, #E74C3C 100%);
效果如下圖：
三、徑向漸變
Webkit Linear Gradient不僅可以實現線性的漸變效果，還可以實現徑向的漸變效果。
使用下面的代碼，我們可以實現一個由內而外逐漸變暗的漸變效果：
background: -webkit-radial-gradient(50% 50%,ellipse cover, #FFAFBD, #ffc3a0);
效果如下圖：
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/206074.html
微信掃一掃 
支付寶掃一掃 