漸變是,不是顏色。css中漸變分為,線性漸變和徑向漸變兩種。
為了建立乙個線性漸變,需要設定乙個起始點和乙個方向(指定為乙個角度)。還要定義終止色。終止色就是你想讓瀏覽器去平滑的過渡過去,並且你必須指定至少兩種,當然也會可以指定更多的顏色去建立更複雜的漸變效果。
語法:
效果:/*預設從上到下發生漸變*/
background-image:linear-gradient(red,blue);
/*改變漸變方向:(top bottom left right)*/
background-image:linear-gradient(to 結束的方向,red,blue);
/*使用角度(單位/deg)*/
background-image:linear-gradient(角度,red,blue);
/*顏色節點的分布(第乙個不寫為0%,最後乙個不寫為100%)*/
background-image:linear-gradient(red 長度或者百分比,blue 長度或者百分比);
/*重複漸變*/

效果:hello world 你好啊 !

radial-gradient() 函式建立乙個,用來展示由原點(漸變中心)輻射開的顏色漸變。
語法:
/*預設均勻分布*/
background-image: radial-gradient(red,blue);
/*不均勻分布*/
background-image: radial-gradient(red 50%,blue 70%);
/*改變漸變的形狀*/
background-image: radial-gradient(circle ,red,blue);
可選值:
circle
ellipse(預設為橢圓)
/*漸變形狀的大小*/
background-image: radial-gradient(closest-corner circle ,red,blue);
可選值:
closest-side 最近邊
farthest-side 最遠邊
closest-corner 最近角
farthest-corner 最遠角 (預設值)
/*改變圓心*/
background-image: radial-gradient(closest-corner circle at 10px 10px,red,blue);
效果:

17 CSS 框模型概述
css 框模型 box model 規定了元素框處理元素內容 內邊距 邊框 和 外邊距 的方式。元素框的最內部分是實際的內容,直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距,外邊距預設是透明的,因此不會遮擋其後的任何元素。內邊距 邊框和外邊距都是可選的,預設值是...
1 7 css依賴順序的解析
入口檔案 login.js login.js的依賴 login.css login.css的依賴 account.css account.css的依賴 reset.css 重置樣式 dialog.css 彈窗 validator.css 驗證 dialog.css的依賴 reset.css rese...
CSS基礎 17CSS盒子模型 外邊距合併
html class div01 apicloud是一家移動應用開發者平台,api除錯及用量分析 同時提供推送 雲修復 大資料分析等服務。apicloud由 雲api 和 端api 兩部分組成,可以幫助開發者快速實現移動應用的開發 測試 發布 管理和運營的全生命週期管理。柚子 北京 科技 旗下產品。...