乾貨 CSS實現漸變色,詳解

2021-08-20 09:50:05 字數 568 閱讀 4476

background: linear-gradient( 角度 ,起始色 0%【起始色游標】, 結束色 0%【結束色游標】);
兩游標之間為漸變色,當結束色游標在起始色游標之前時,以起始色游標為準。

#34d058 與 linear-gradient(180deg,#34d058 100%, #28a745 *%)  同色,*表示任意數字。

#28a745 與 linear-gradient(180deg,#34d058 0%, #28a745 0%) 同色。

background: linear-gradient(180deg,#34d058 0%, #28a745 100%)//等比例混色

180deg是從上到下,左邊比例若從零增大,在0%到百分比處起高光效果;右邊比例若從100%減小,在百分比到100%處起陰影效果。

CSS樣式 漸變色

background linear gradient 實現漸變色,這裡使用background屬性中的linear gradient 線性漸變 值 這都好理解,就後面這個值的屬性不好理解。首先,第乙個值是angle或者point,也就是角度或者方向。意思你要實現從什麼到什麼的漸變色。單位為deg d...

使用css實現漸變色背景

線性漸變 放射性漸變 語法 linear gradient to bottom,colorstrat,colorend 引數含義 第乙個引數指定 漸變的方向 to bottom 從上至下 to bottom right 從左上至右下 to right 從左至右 to up right 從左下至右上 ...

css實現背景漸變色效果

webkit核心的瀏覽器,例如 chrome,safari等 background webkit gradient linear,0 0,0 100 from 000000 to ffffff 第乙個引數表示漸變型別 type 可以是linear 線性漸變 或者radial 徑向漸變 第二個引數和第...