發布時間 : 2023年10月24日 11:17:13 發布者 : kid web前端
設計css 漸變是在 css3 image module 中新增加的型別. 使用 css 漸變可以在兩種顏色間製造出平滑的漸變效果. 用它代替，可以加快頁面的載入時間、減小頻寬占用。同時，因為漸變是由瀏覽器直接生成的，它在頁面縮放時的效果比更好，因此你可以更加靈活、便捷的調整頁面布局。
瀏覽器支援兩種型別的漸變：線性漸變 (linear)，通過 。該函式結果是乙個css 物件的data型別。向其他漸變一樣, 線性漸變不是乙個css且影象不具有內在尺寸；就是說, 它沒有預設或者首選的大小或者是比值。它的實際大小和它所應用的其中乙個元素相匹配。" href="">linear-gradient函式定義，以及 徑向漸變 (radial)，通過 ，以用來表示起源於原點（漸變中心）的顏色漸變。這個方法得到的是乙個css資料型別的物件。" href="">radial-gradient函式定義.
為了建立乙個線性漸變，你需要設定乙個起始點和乙個方向（指定為乙個角度）的漸變效果。你還要定義終止色。終止色就是你想讓gecko去平滑的過渡，並且你必須指定至少兩種，當然也會可以指定更多的顏色去建立更複雜的漸變效果。
這裡是乙個線性漸變從中間（水平方向）和頂部（垂直方向）開始，起始於藍色，過渡到白色.
螢幕截圖
現場演示
/* the old syntax, deprecated, but still needed, prefixed, for webkit-based and old browsers */
background: -prefix-linear-gradient(top, blue, white);
/* the new syntax needed by standard-compliant browsers (opera 12.1, ie 10, fx 16 onwards), without prefix */
background: linear-gradient(to bottom, blue, white);
改變相同的漸變從左到右執行:
螢幕截圖
現場演示
/* the old syntax, deprecated, but still needed, prefixed, for webkit-based and old browsers */
background: -prefix-linear-gradient(left, blue, white);
/* the new syntax needed by standard-compliant browsers (opera 12.1, ie 10, fx 16 onwards), without prefix */
background: linear-gradient(to right, blue, white);
你可以通過指定平行和垂直的開始位置讓漸變傾斜，例如:
螢幕截圖
現場演示
/* the old syntax, deprecated, but still needed, prefixed, for webkit-based and old browsers */
background: -prefix-linear-gradient(left top, blue, white);
/* the new syntax needed by standard-compliant browsers (opera 12.1, ie 10, fx 16 onwards), without prefix */
background: linear-gradient(to bottom right, blue, white);
右邊的這個使用的是這樣的css樣式：
background: linear-gradient(70deg, black, white);
background: linear-gradient(, red, white);
css border漸變 css邊框漸變
在實際開發中，我們經常遇見邊框需要背景漸變的實現要求，那麼如何去實現呢，今天給大家分享依稀幾種情況 1.直角的背景漸變 border漸變進入平台注意問題 border image的使用是不能實現圓角的效果，各位需要注意這個屬性 2.圓角的背景漸變 如下 利用偽類元素去實現背景邊的漸變效果，同時我們還...
css顏色漸變
華麗麗的分割線 123 用css實現網頁背景漸變的 如下 一 從上往下漸變 example source code body 二 從左上至右下漸變 example source code body 三 從左往右漸變 example source code body 一 從上往下漸變 example ...
css 顏色漸變
漸變可以建立類似於彩虹的效果，低版本的瀏覽器不的不使開發者用來實現，css3將會輕鬆實現網頁漸變效果。要得上面的線性漸變效果，我們這樣去定義css3樣式 background image moz linear gradient top,8fa1ff,3757fa firefox background...