線性漸變（linear gradient）

現行漸變

首先看下示例

（1）垂直漸變

（2）垂直漸變

ie系列

filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#ff0000',endcolorstr='#f9f900',gradienttype='0');

引數：startcolorstr起始顏色       endcolorstr結束顏色        gradienttype為0時代表垂直，為1時代表水平

firefox

background: -moz-linear-gradient(top, #ff0000, #f9f900);

引數：top、bottom垂直，left、right水平        例如：top時從頂部由#ff0000到#f9f900漸變，bottom時從底部由#ff0000到#f9f900漸變

opera

background: -o-linear-gradient(top,#ff0000, #f9f900);

引數：top、bottom垂直，left、right水平        例如：top時從頂部由#ff0000到#f9f900漸變，bottom時從底部由#ff0000到#f9f900漸變

webkit，如chrome、safari等

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff0000), to(#f9f900));

引數：linear線性，  x1 x2, x3  x4   x1與x3相同時垂直，x2與x4相同時水平   from起始顏色  to結束顏色

view code

123

3637
38垂直漸變
3940
41水平漸變
4243
44

學習並使用線性漸變linear gradient

之前的實踐中我們了解並熟悉了background size,以及backgroud clip,今天我們學習並實踐的是線性漸變linear gradient.css linear gradient 函式用於建立乙個表示兩種或多種顏色線性漸變的。其結果屬於資料型別，是一種特別的資料型別。linear g...

線性漸變和徑向漸變

linear gradient direction，color 寫法 background webkit linear gradient direction，color 1.direction 方向，預設方向是自上而下 寫法有 1.background webkit linear gradient ...

線性漸變和徑向漸變

格式 background image linear gradient 方向，起始顏色 終止顏色 方向 to left to right to top to bottom 角度 360 180 45 從左下到右上 90 相當於 to right 從左到右 135 從左上到右下 180 從上到下 di...