17 CSS漸變及簡單特效

2021-10-24 07:20:33 字數 1812 閱讀 6941

漸變是,不是顏色。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 兩部分組成,可以幫助開發者快速實現移動應用的開發 測試 發布 管理和運營的全生命週期管理。柚子 北京 科技 旗下產品。...