久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

分享

CSS3 經(jīng)典教程系列:CSS3 線性漸變(linear-gradient)

 zww_blog 2013-10-23
CSS3 Gradient 分為 linear-gradient(線性漸變)和 radial-gradient(徑向漸變),。而我們今天主要是針對線性漸變來剖析其具體的用法,。為了更好的應用 CSS3 Gradient,我們需要先了解一下目前的幾種現(xiàn)代瀏覽器的內(nèi)核,,主要有 Mozilla(Firefox,,F(xiàn)lock等)、WebKit(Safari,、Chrome等),、Opera(Opera瀏覽器)、Trident(討厭的IE瀏覽器),。

  本文照常忽略IE不管,,我們主要看看在 Mozilla、Webkit、Opera 下的應用,,當然在 IE 下也可以實現(xiàn),,他需要通過 IE 特有的濾鏡來實現(xiàn),在后面會列出濾鏡的使用語法,,但不會具體介紹如何實用,,感興趣的可以搜索相關(guān)技術(shù)文檔。

一,、線性漸變在 Mozilla 下的應用

  語法:

1
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

  參數(shù):其共有三個參數(shù),,第一個參數(shù)表示線性漸變的方向,top 是從上到下,、left 是從左到右,,如果定義成 left top,那就是從左上角到右下角,。第二個和第三個參數(shù)分別是起點顏色和終點顏色,。你還可以在它們之間插入更多的參數(shù),表示多種顏色的漸變,。如圖所示:

  

  根據(jù)上面的介紹,,我們先來看一個簡單的例子:

  HTML:

1
<div class="example example1"></div>

  CSS:

1
2
3
4
.example {
   width: 150px;
   height: 80px;
 }

  如無特殊說明,我們后面的示例都是應用這一段 html 和 css 的基本代碼,。

  現(xiàn)在我們給這個div應用一個簡單的漸變樣式:

1
2
3
.example1 {
   background: -moz-linear-gradient( top,#ccc,#000);
}

  效果如下:

  

二,、線性漸變在 Webkit 下的應用

  語法:

1
2
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新發(fā)布書寫語法
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式語法書寫規(guī)則

  參數(shù):-webkit-gradient 是 webkit 引擎對漸變的實現(xiàn)參數(shù),一共有五個,。第一個參數(shù)表示漸變類型(type),,可以是linear(線性漸變)或者radial(徑向漸變)。第二個參數(shù)和第三個參數(shù),,都是一對值,,分別表示漸變起點和終點。這對值可以用坐標形式表示,,也可以用關(guān)鍵值表示,,比如 left top(左上角)和left bottom(左下角)。第四個和第五個參數(shù),,分別是兩個color-stop函數(shù),。color-stop 函數(shù)接受兩個參數(shù),第一個表示漸變的位置,,0為起點,,0.5為中點,1為結(jié)束點,;第二個表示該點的顏色,。如圖所示:

  

  

  我們先來看一個老式的寫法示例:

1
background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000));

  效果如下所示:

  

  接著我們在來看一下新式的寫法:

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

  這個效果我就不在貼出來了,,大家在瀏覽器中一看就明白了,他們是否一致的效果,。仔細對比,,在 Mozilla 和 Webkit 下兩者的學法都基本上一致了,只是其前綴的區(qū)別,,當然哪一天他們能統(tǒng)一成一樣,,對我們來說當然是更好了,那就不用去處理了,。將大大節(jié)省我們的開發(fā)時間喲,。

三、線性漸變在 Opera 下的應用

  語法:

1
-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */

  參數(shù):-o-linear-gradient 有三個參數(shù),。第一個參數(shù)表示線性漸變的方向,,top 是從上到下、left 是從左到右,,如果定義成 left top,,那就是從左上角到右下角。第二個和第三個參數(shù)分別是起點顏色和終點顏色,。你還可以在它們之間插入更多的參數(shù),,表示多種顏色的漸變。(注:Opera 支持的版本有限,,本例測試都是在 Opera11.1 版本下,,后面不在提示),如圖所示:

  

  示例代碼:

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

  效果如圖所示:

  

四,、線性漸變在 Trident (IE) 下的應用

  語法:

1
2
3
 
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/
div { background-image:-ms-radial-gradient(yellow 0%, fuchsia 100%); }/*IE10*/
background-image:-ms-linear-gradient(30deg, orange, yellow 50%, turquoise);
background-image:-ms-radial-gradient(top center, circle cover, orange, yellow 25px, turquoise);

  IE依靠濾鏡實現(xiàn)漸變,。startColorstr表示起點的顏色,endColorstr 表示終點顏色,。GradientType 表示漸變類型,,0 為缺省值,,表示垂直漸變,,1 表示水平漸變。如圖所示:

  

  上面我們主要介紹了線性漸變在上述四大核心模塊下的實現(xiàn)方法,,接著我們主要針對線性漸變在 Mozilla,、Webkit、Opera 三大模塊下實現(xiàn)各種不同線性漸變實例:

  從上面的語法中我們可以很清楚的知道,,要創(chuàng)建一個線性漸變,,我們需要創(chuàng)建一個起點和一個漸變方向(或角度),定義一個起始色:

1
2
3
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
-o-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

  具體應用如下:

1
2
3
4
background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));/*Old gradient for webkit*/
background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/
background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/

  效果如下:

  

  起始點(Starting Point)的工作方式類似于 background position,。您可以設(shè)置水平和垂直位置為百分比,,或以像素為單位,,或在水平方向上可以使用left/center/right,在垂直方向上可以使用top/center/bottom,。位置起始于左上角,。如果你不指定水平或垂直位置,它將默認為center,。其工作方式主要包含:Top → Bottom,、Left → Right、bottom → top,、right → left等,,接著我們主要一種一種來看其實現(xiàn)的效果:

  1、開始于center(水平方向)和top(垂直方向)也就是Top → Bottom:

1
2
3
4
5
6
7
8
9
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #ace, #f96);
/* Safari 4-5, Chrome 1-9 */
/* -webkit-gradient(,  [, ]?,  [, ]? [, ]*) */
background: -webkit-gradient(linear,top,from(#ace),to(#f96));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(top, #ace, #f96);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #ace, #f96);

  效果:

  

  2,、始于left(水平方向)和center(垂直方向)也是就Left → Right:

1
2
3
4
5
6
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #ace, #f96);
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(left, #ace, #f96);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #ace, #f96);

  效果如下:

  

  3,、起始于left(水平方向)和top(垂直方向):

1
2
3
background: -moz-linear-gradient(left top, #ace, #f96);
background: -webkit-linear-gradient(left top, #ace, #f96);
background: -o-linear-gradient(left top, #ace, #f96);

  效果如下:

  

  4、Linear Gradient (with Even Stops):

1
2
3
4
5
6
7
8
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, right top, from(#ace), color-stop(0.25, #f96), color-stop(0.5, #ace), color-stop(0.75, #f96), to(#ace));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #ace, #f96, #ace, #f96, #ace);

  效果如下:

  

  5,、with Specified Arbitrary Stops:

1
2
3
4
5
6
7
8
/* Firefox 3.6+ */
 background: -moz-linear-gradient(left, #ace, #f96 5%, #ace, #f96 95%, #ace);
 /* Safari 4-5, Chrome 1-9 */
 background: -webkit-gradient(linear, left top, right top, from(#ace), color-stop(0.05, #f96), color-stop(0.5, #ace), color-stop(0.95, #f96), to(#ace));
 /* Safari 5.1+, Chrome 10+ */
 background: -webkit-linear-gradient(left, #ace, #f96 5%, #ace, #f96 95%, #ace);
 /* Opera 11.10+ */
 background: -o-linear-gradient(left, #ace, #f96 5%, #ace, #f96 95%, #ace);

  效果如下:

  

  6,、角度(Angle):

  正如上面看到的示例,如果您不指定一個角度,,它會根據(jù)起始位置自動定義,。如果你想更多的控制漸變的方向,您不妨設(shè)置角度試試,。例如,,下面的兩個漸變具有相同的起點left center,但是加上一個30度的角度,。

  沒有角度的示例代碼:

1
2
3
background: -moz-linear-gradient(left, #ace, #f96);
background: -webkit-linear-gradient(left,#ace,#f96);
background: -o-linear-gradient(left, #ace, #f96);

  加上30度的角度代碼:

1
2
3
background: -moz-linear-gradient(left 30deg, #ace, #f96);
background: -webkit-gradient(linear, 0 0, 100% 100%, from(#ace),to(#f96));
background: -o-linear-gradient(30deg, #ace, #f96);

  效果圖如下:

       

  當指定的角度,,請記住,它是一個由水平線與漸變線產(chǎn)生的的角度,,逆時針方向,。因此,使用0deg將產(chǎn)生一個左到右橫向梯度,,而90度將創(chuàng)建一個從底部到頂部的垂直漸變,。我來看看你核心代碼:

1
2
3
4
background: -moz-linear-gradient(<angle>, #ace, #f96);
background: -webkit-gradient(<type>,<angle>, from(#ace), to(#f96));
background: -webkit-linear-gradient(<angle>, #ace, #f96);
background: -o-linear-gradient(<angle>, #ace, #f96);

  我們來看看各角度的區(qū)別:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
.deg0 {
  background: -moz-linear-gradient(0deg, #ace, #f96);
  background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(0deg, #ace, #f96);
  background: -o-linear-gradient(0deg, #ace, #f96);
}
     
.deg45 {
  background: -moz-linear-gradient(45deg, #ace, #f96);
  background: -webkit-gradient(linear,0 100%,100% 0%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(45deg, #ace, #f96);
  background: -o-linear-gradient(45deg, #ace, #f96);
}
.deg90 {
  background: -moz-linear-gradient(90deg, #ace, #f96);
  background: -webkit-gradient(linear,50% 100%,50% 0%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(90deg, #ace, #f96);
  background: -o-linear-gradient(90deg, #ace, #f96);
}
.deg135 {
  background: -moz-linear-gradient(135deg, #ace, #f96);
  background: -webkit-gradient(linear,100% 100%,0 0,from(#ace),to(#f96));
  background: -webkit-linear-gradient(135deg, #ace, #f96);
  background: -o-linear-gradient(135deg, #ace, #f96);
}
.deg180 {
  background: -moz-linear-gradient(180deg, #ace, #f96);
  background: -webkit-gradient(linear,100% 50%,0 50%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(180deg, #ace, #f96);
  background: -o-linear-gradient(180deg, #ace, #f96);
}
.deg225 {
  background: -moz-linear-gradient(225deg, #ace, #f96);
  background: -webkit-gradient(linear,100% 0%,0 100%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(225deg, #ace, #f96);
  background: -o-linear-gradient(225deg, #ace, #f96);
}
.deg270 {
  background: -moz-linear-gradient(270deg, #ace, #f96);
  background: -webkit-gradient(linear,50% 0%,50% 100%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(270deg, #ace, #f96);
  background: -o-linear-gradient(270deg, #ace, #f96);
}
.deg315 {
  background: -moz-linear-gradient(315deg, #ace, #f96);
  background: -webkit-gradient(linear,0% 0%,100% 100%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(315deg, #ace, #f96);
  background: -o-linear-gradient(315deg, #ace, #f96);
}
.deg360 {
  background: -moz-linear-gradient(360deg, #ace, #f96);
  background: -webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
  background: -webkit-linear-gradient(360deg, #ace, #f96);
  background: -o-linear-gradient(360deg, #ace, #f96);
}

  效果如下:

  

  除了起始位置和角度,你應該指定起止顏色,。起止顏色是沿著漸變線,,將會在指定位置(以百分比或長度設(shè)定)含有指定顏色的點。色彩的起止數(shù)是無限的,。如果您使用一個百分比位置,,0%代表起點和100%是終點,但區(qū)域外的值可以被用來達到預期的效果,。 這也是通過CSS3 Gradient制作漸變的一個關(guān)鍵所在,,其直接影響了你的設(shè)計效果,,像我們這里的示例都不是完美的效果,只是為了能給大家展示一個漸變的效果,,大家就這樣先用著吧,。我們接著看一下不同的起址色的示例:

1
2
3
background: -moz-linear-gradient(top, #ace, #f96 80%, #f96);
background: -webkit-linear-gradient(top,#ace,#f96 80%,#f96);
background: -o-linear-gradient(top, #ace, #f96 80%, #f96);

  效果如下:

  

  如果沒有指定位置,顏色會均勻分布,。如下面的示例:

1
2
3
background: -moz-linear-gradient(left, red, #f96, yellow, green, #ace);
background: -webkit-linear-gradient(left,red,#f96,yellow,green,#ace);
background: -o-linear-gradient(left, red, #f96, yellow, green, #ace);

  效果如下

  

  7,、漸變上應用透明度(Transparency):

  透明漸變對于制作一些特殊的效果是相當有用的,例如,,當堆疊多個背景時,。這里是兩個背景的結(jié)合:一張圖片,一個白色到透明的線性漸變,。我們來看一個官網(wǎng)的示例吧:

1
2
3
background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
background: -webkit-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
background: -o-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)),url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);

    本站是提供個人知識管理的網(wǎng)絡存儲空間,,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點,。請注意甄別內(nèi)容中的聯(lián)系方式,、誘導購買等信息,謹防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,,請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多