CSS 線性漸變（可實現 div對角線或斜線）

學習和了解線性漸變的起因是需要用css實現div對角線或者斜線，具體原型圖如下：

1. 語法介紹

linear-gradient() 函式用於建立乙個線性漸變的 「影象」。

為了建立乙個線性漸變，你需要設定乙個終點方向（指定為乙個角度）的漸變效果。你還要定義終止色。終止色就是你想讓gecko去平滑的過渡，並且你必須指定至少兩種，當然也會可以指定更多的顏色去建立更複雜的漸變效果。

background

:linear-gradient
(direction, 
[length | percentage]color-stop1, [length | percentage]color-stop2, ...)
;

意義direction

用角度值指定漸變的走向（或角度）

color-stop1, color-stop2,…

用於指定漸變的起止顏色

length

用長度值指定起止色位置，不允許負值

percentage

用百分比指定起止色位置

注意：以下情況只在寬高相同時成立，建議使用走向描述如to top left

2. 用線性漸變繪製斜線請看示例

background

:linear-gradient
(to bottom right,
transparent 0%,
transparent calc
(50% - 1px),
#1069b2 50%,
transparent calc
(50% + 1px),
transparent 100%
)

background

:linear-gradient
(to top right,
transparent 0%,
transparent calc
(50% - 1px),
#1069b2 50%,
transparent calc
(50% + 1px),
transparent 100%
)

漸變方向1

漸變方向2

左上→右下 ↘

to top rightto bottom left

左下→右上 ↗

to top leftto bottom right

知識不分難易，有用便值得記憶。我是迷心，只記有用知識的程式猿。

css線性漸變

css3中的線性漸變，有了這個，好多以前必須要用才能實現的效果如今可能只需簡單一行 就能實現。首先看看今天的主角 linear gradient 它，實際上不是顏色，而是背景。也就是說，它並不是color的屬性值，而是background的屬性值。我們接下來看看linear gradient 的具體...

css之線性漸變

至少兩種顏色，多了不限 background image linear gradient 顏色1，顏色2.如下 效果圖如下 background image linear gradient 角度值，顏色1，顏色2.效果圖如下 background image linear gradient to 方...

利用css實現div背景顏色動態漸變

在做比較炫酷的現代風格網頁時，乙個div的顏色可能是動態的，不斷變化的。下面來說一下這種效果是如何實現的。用到的css方法 1 linear gradient 用於設定漸變的顏色 background linear gradient 90deg,496eaa,944fa8,a8804f,496eaa...