2020 0403漸變知識總結

2021-10-23 03:33:07 字數 1902 閱讀 1352

前提:很多css3屬性 最初的預覽版沒有形成最終的正式版,但是瀏覽器為了對這些新屬性形成支援,主流瀏覽器提供屬於自己的語法規則「瀏覽器字首」

-webkit- 谷歌、蘋果瀏覽器字首

-moz- 火狐瀏覽器字首

-ms- ie瀏覽器字首

-o- 歐鵬瀏覽器字首

注:相容模式必須新增瀏覽器字首,標準模式不新增瀏覽器字首。

一、漸變

1:線性漸變

線性漸變:從乙個方向到另乙個方向的顏色變化。

標準模式的語法(不新增瀏覽器字首):

background:linear-gradient(direction,color-stop1,color-stop2,。。。)

說明:direction:預設為to bottom,即從上向下漸變。

stop:顏色的分布位置,預設均勻分布,例如有三個顏色,各個顏色是stop均為33.33%。

相容模式語法(新增瀏覽器字首):

background:-webkit-linear-gradient(direction,color-stop1,color-stop2,。。。);

說明:direction:不能新增to 預設指的是從哪個方向開始。

漸變方向:

1:to left\to right\to top

2:對角漸變

to left top\to right bottom

3:漸變線角度的變化

例如:標準模式:40deg 40度

相容模式:90-40

線性漸變:顏色的分布:

linear-gradient(方向,顏色1 20%,顏色2 30%,顏色3)

到20%這個位置仍然是顏色1,出了20%開始向顏色2漸變。

2:徑向漸變

徑向漸變:從乙個點到四周的顏色的過濾變化。

語法(必須新增瀏覽器字首):

background:-webkit-radisl-grdaient(center,shape,size,start-color,… last-color);

說明:center:漸變起點的位置,可以為百分比,預設的是圖形的正中心。

shape:漸變的形狀,ellipse表示為橢圓,circle表示為圓形,一般預設值是橢圓ellipse,如果元素形狀為正方形的元素,則ellipse和circle顯示一樣

size:漸變的大小,即漸變到**停止,它有四個值。closest-side 最近邊;farthest-side

最遠邊;closest-corner最近角;farthest-corner 最遠角。

3:重複性漸變

重複性線性漸變

background:repeating-linear-gradient();

重複性徑向漸變

background:repeating-radial-gradient();

二、過渡

1:transition-property:檢索或設定物件中的參與過渡的屬性。

2:transition-duration:檢索或設定物件過渡的持續時間。

3:transition-delay:檢索或設定物件延遲過渡的時間。

4:transition-timing-function:檢索或設定物件中過渡的動畫型別。

注:動畫的運動型別:預設的不是勻速,預設的是ease。

簡寫屬性:

transition:過渡的屬性(all) 過渡的時間 延遲的時間 動畫型別(linear 勻速)

transition必須通過事件觸發!(滑鼠滑過)改變css屬性的值。

SQL知識總結

use tablename 要操作的資料庫名 select logicalfilename tablename log 日誌檔名 maxminutes 10,limit on time allowed to wrap log.newsize 1 你想設定的日誌檔案的大小 m setup initia...

UML知識總結

uml從組成結構上講是由以下三大部分組成。第一部分是指包含uml建模的基本元素 關係和圖構造塊部分。基本建模元素是整個模型的基礎,有時被稱為物件,又可細分為結構性 行為性 分組性 注釋性建模元素。關係是說明多個模型元素在語意上的相關性,並可形成更高層次的語意定義,主要用在結構性和分組性的元素之間。可...

java知識總結

包的訪問控制 子類 同個包內 不同包內 public y y y protect y y n private n n n i o和流 四個抽象類 讀寫位元組 inputstream outputstream 讀寫unicode字元 reader writer iterator arraylist v...