css3 漸變怎麼實現,CSS3怎麼做出過渡漸變效果

時間 2021-09-06 20:15:11

1樓:匿名使用者

針對不同瀏覽器有不同的字首,基本還是相似的,下面的意思是線性漸變,從上方開始,從黑色漸變到白色

-webkit-linear-gradient(top,#000,#fff);

-moz-linear-gradient(top,#000,#fff);

-o-linear-gradient(top,,#000,#fff);

也可以加一些漸變中間的顏色

-webkit-linear-gradient(top,#000,#eee 20%,#fff);

也可以使用color stop,跟上面的意思相同

-webkit-linear-gradient(top,#000,color-stop(0.2, #eee),#fff)

2樓:森德隆網路科技

屬性 gradient( 《漸變型別》, [, ]?, [, ]? [, ]*)

-webkit-

-moz-l

-o-字首是 各種瀏覽器的 特有樣式

gradient是webkit引擎對漸變的實現引數,一共有五個。第一個參數列示漸變型別(type),可以是linear(線性漸變)或者radial(徑向漸變)。第二個引數和第三個引數,都是一對值,分別表示漸變起點和終點。

這對值可以用座標形式表示,也可以用關鍵值表示,比如 left top(左上角)和left bottom(左下角)。第四個和第五個引數,分別是兩個color-stop函式。color-stop函式接受兩個引數,第一個表示漸變的位置,0為起點,0.

5為中點,1為結束點;第二個表示該點的顏色。

參考 資料

3樓:匿名使用者

樓上有說線性漸變了,還有個徑像漸變:-webkit-radial-gradiet(top,#fff,#999);

css3漸變怎麼實現?

4樓:匿名使用者

css 漸變 是在 css3 image module 中新增加的 型別. 使用 css 漸變可以在兩種顏色間製造出平滑的漸變效果. 用它代替**,可以加快頁面的載入時間、減小頻寬佔用。

同時,因為漸變是由瀏覽器直接生成的,它在頁面縮放時的效果比**更好,因此你可以更加靈活、便捷的調整頁面佈局。

瀏覽器支援兩種型別的漸變:線性漸變 (linear),通過 linear-gradient 函式定義,以及 徑向漸變 (radial),通過 radial-gradient 函式定義

學習更多css3漸變可以到實,戰,幫

css3怎麼做出過渡漸變效果

5樓:匿名使用者

transition的語法:transition: transition-property || transition-duration ||

transition-timing-funciton || transition-delay ;

其引數的取值說明如下:

:定義用於過渡的屬性;

:定義過渡過程需要的時間(必選,否則不會產生過渡效果)

:定義過渡的方式;

:定義開始過渡的延遲時間;

使用transition屬性定義一組過渡效果,需要以上四個引數。transition屬性可以同時定義

兩組或兩組以上的過渡效果,組與組之間用逗號分隔。

基於webkit核心的私有屬性是:-webkit-transition;

基於gecko核心的私有屬性是:-moz-transition;

基於prestot核心的私有屬性是:-o-transition;

6樓:江西新華天枰

建議你用這個標籤去試試transition

怎樣用css實現**的漸變?如圖

7樓:匿名使用者

這個你可以在**上面加個漸變顏色就行了,background:linear-gradient()

css 如何實現 顏色的漸變??

8樓:幻翼高達

2、在index.html中的標籤中,輸入css**:

div3、瀏覽器執行index.html頁面,此時td中的div的背景顏色從紅色到白色漸變。

9樓:du瓶邪

在mozilla 下

background: -moz-linear-gradient( top,#ccc,#000);

引數說明

1,起點位置top 是從上到下,left是從左到右,left top是左上到右下

2,開始顏色,

3,結束顏色

在webkit下

-webkit-linear-gradient(top,#ccc,#000);

引數與mozilla一致

在 opera 下

background: -o-linear-gradient(top,#ccc, #000);

數與mozilla一致

更多的引數應用可以去度娘查詢,有很詳細引數使用示例.

10樓:匿名使用者

css3支援顏色漸變,但目前主流瀏覽器對css3支援都不完全,甚至不支援。

所以你可以使用背景**來做,你要豎向漸變,可以將**切成寬1px的背景,然後設定這個div的背景平鋪。如:background:

url(bg.gif) left right repeat-x;

11樓:焰火月

css3標準裡可以實現背景色漸變、圓角邊框的語句\

目前css2.0不支援這樣的語句,要實現真得用js

12樓:匿名使用者

濾鏡可以做,不過相容性只有ie支援

13樓:

js實現,要不然你就弄一張你所想的效果的背景**。

使用div+css實現背景顏色漸變,怎麼實現呢?

14樓:

如果只要求相容高階瀏覽器,css3可以解決。

.box

如果要相容低階瀏覽器,例如ie6,還是用背景**重複吧。

上面的這屬性可以在css手冊裡查到。

15樓:

利用css3可實現背景顏色漸變:

一、線性漸變:

1、線性漸變在 mozilla 下的應用

語法:-moz-linear-gradient( [|| ,]? , [, ]* )

2、線性漸變在 webkit 下的應用

語法:-webkit-linear-gradient( [|| ,]? , [, ]* )//最新發布書寫語法

3、線性漸變在 opera 下的應用

語法:-o-linear-gradient([|| ,]? , [, ]); /* opera 11.10+ */

二 徑向漸變

語法:-moz-radial-gradient([|| ,]? [|| ,]? , [, ]*);

-webkit-radial-gradient([|| ,]? [|| ,]? , [, ]*);

css和css3有什麼區別,CSS和CSS3有什麼區別

就是多了很多新的屬性,但向後相容css2和css,具體可以去w3school上看 http www.w3school.com.cn css3 css3 intro.asp 增加了點屬性,丟棄了點兒屬性,注意用法的改變就行了。沒什麼大區別,會css看看css3就行。 都是網頁樣式code,不同的在於c...

手機css3動畫不執行的原因是什麼

之何勿思 可能是源 問題,可以檢視源 不多的,用手機和電腦瀏覽,注意那個充電頭的動畫。1 最好加上瀏覽器相容字首 你的 transition all 5s linear 1s 如果你是用在webkit核心的瀏覽器,最好這樣寫 webkit transition all 5s linear 1s tr...

css中display怎麼做顯示或隱藏

顧傾城 display none可以隱藏某個元素,且隱藏的元素不會佔用任何空間。該元素不但被隱藏了,而且該元素原本佔用的空間也會從頁面佈局中消失。display block可以顯示一個塊元素,或者display inline是顯示一個內聯元素。display主要用的css樣式有以下三個 displa...