學習前端的第十六天

2021-10-23 03:20:43 字數 1844 閱讀 1185

一、瀏覽器字首

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

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

-moz- 火狐瀏覽器字首

-ms- ie瀏覽器字首

-o- 歐鵬瀏覽器

注:新增瀏覽器字首 -> 相容模式

不新增瀏覽器字首 -> 標準模式

二、漸變

1.漸變:背景色在多個顏色之間平穩的過渡。

2.線性漸變

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

b.標準模式語法:

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

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

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

c.相容模式語法:

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

說明: direction: 不能新增to

3.漸變方向

a. 到什麼方向的漸變:

to left\to right\ to top

b.對角漸變

to left top\to right bottom

c.漸變線角度的變化

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

相容模式:90-40

4.顏色的分布:

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

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

5. 徑向漸變

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

b.語法:(必須加瀏覽器字首)

background: radial-gradient(center, shape, size, start-color, …, last-color);

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

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

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

6.重複性漸變

重複性漸變分為重複性線性漸變和重複性徑向漸變。

a.重複性線性漸變

background:repeating-linear-gradient();

b.重複性徑向漸變

background:repeating-radial-gradient();

三、過渡

1.過渡屬性

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

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

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

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

動畫的運動型別:

預設的不是勻速 ,預設的是ease

2.簡寫屬性:

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

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

學習python 第十六天

流 i o 一 編碼 編碼明文 暗文 明文 暗文 解碼計算機只認識010101 ascii 0 127 ansi ascii加上拉丁文 gb2312 ascii加上7000多個漢字 前八位和後八位 127 gbk gb2312加上2萬多個漢字 前八位 127 unicode 國際通用 utf 8 推...

RHCE linux學習第十六天

16.1 快取服務 squid是linux系統中最為流行的一款高效能 服務軟體,通常用作web 的前置快取服務,能夠代替使用者向 伺服器請求頁面資料並進行快取。簡單來說,squid服務程式會按照收到的使用者請求向 源伺服器請求頁面 等所需的資料,並將伺服器返回的資料儲存在執行squid服務程式的伺服...

Linux 第十六天學習

一 dhcp dynamic host configuration protocol 採用udp 協議 引數 作用 ddns update style 型別 定義dns服務動態更新的型別,型別包括 none 不支援動態更新 interim 互動更新模式 與ad hoc 特殊更新模式 allow ig...