當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

CSS3学习笔记之linear-gradient

發布時間：2023/12/13 综合教程 29 生活家

生活随笔收集整理的這篇文章主要介紹了 CSS3学习笔记之linear-gradient 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

我覺得CSS3很不錯，自己也稍微看過，并且嘗試過一些屬性。對我自己而言，我沒有勇氣說我學過CSS3，我覺得任何自己看來很小的事情，也只是站在自己的角度來評判。就算的是“簡單的”HTML在我看來也是很值得研究的，只有時刻保持一個謙遜的姿態，才能夠看得更遠，走得更穩。

在這里要感謝一下網站：

w3cplus，W3School ，W3C 等等一些網上的教程啊博客什么的（還有好多就不一一列舉了），我算是從這些地方開始接觸傳說中的CSS3和HTML5，而自己的學習筆記自然也會從中借鑒。

建議：大部分CSS3的屬性尚在草案之中，使用的時候最好還是都加上各自瀏覽器的私有前綴

eg：
{
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}
.csharpcode, .csharpcode pre { font-size: small; color: rgba(0, 0, 0, 1); font-family: consolas, "Courier New", courier, monospace; background-color: rgba(255, 255, 255, 1) }
.csharpcode pre { margin: 0 }
.csharpcode .rem { color: rgba(0, 128, 0, 1) }
.csharpcode .kwrd { color: rgba(0, 0, 255, 1) }
.csharpcode .str { color: rgba(0, 96, 128, 1) }
.csharpcode .op { color: rgba(0, 0, 192, 1) }
.csharpcode .preproc { color: rgba(204, 102, 51, 1) }
.csharpcode .asp { background-color: rgba(255, 255, 0, 1) }
.csharpcode .html { color: rgba(128, 0, 0, 1) }
.csharpcode .attr { color: rgba(255, 0, 0, 1) }
.csharpcode .alt { background-color: rgba(244, 244, 244, 1); 100%; margin: 0 }
.csharpcode .lnum { color: rgba(96, 96, 96, 1) }

今天介紹的是CSS3的漸變：linear-gradient

漸變在網頁上應該算是很常見的一種效果。但是在CSS3出現之前，漸變效果必須使用圖片才能做到。這就會出現問題了，就像之前說的圓角和陰影一樣，因為使用了圖片，在一定程度上影響網頁的性能是肯定的，同時還有網站后期維護和修改的難題。CSS3的漸變誕生很久了，到目前為止，只要是支持該屬性的瀏覽器，除了它們的私有前綴之外，其他寫法都是一樣的。

在剛開始的時候，在webkit下使用的是：

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式語法書寫規則

而到現在，在webkit下使用的是：

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新書寫語法

現在，新式語法與其他瀏覽器，包括firefox，opera的語法書寫統一（現在的opera已經使用了webkit內核）；

其實gradient，分成兩種一種是線性漸變（linear-gradient），另一種是徑向漸變（radial-gradient）。我們可以將linear-gradient和radial-gradient添加到任何可以接受圖片的屬性，比如：backgorund-images，list-style-image等等。今天我要介紹的就是標題上的linear-gradient。

線性漸變

在我看來漸變的參數變化多端，有點復雜，所以先從簡單的開始講起

linear-gradient最簡單的語法：

linear-gradient(起點，開始顏色，結束顏色);

起點表示漸變開始的位置，顏色是從開始顏色漸變到結束顏色。

漸變起點有很多種寫法：

1、使用top，right，bottom，left中的一個來指定漸變的起點

.test{

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

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

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

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

2、稍微復雜一點，可以使用top與left或者right組合，也可以使用bottom與left或者

right組合來改變漸變起點。但是切記：top不能和bottom組合，left不能和right組合

.test{

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

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

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

    background:linear-gradient(top right,#fff,#000);

.csharpcode, .csharpcode pre { font-size: small; color: rgba(0, 0, 0, 1); font-family: consolas, "Courier New", courier, monospace; background-color: rgba(255, 255, 255, 1) }
.csharpcode pre { margin: 0 }
.csharpcode .rem { color: rgba(0, 128, 0, 1) }
.csharpcode .kwrd { color: rgba(0, 0, 255, 1) }
.csharpcode .str { color: rgba(0, 96, 128, 1) }
.csharpcode .op { color: rgba(0, 0, 192, 1) }
.csharpcode .preproc { color: rgba(204, 102, 51, 1) }
.csharpcode .asp { background-color: rgba(255, 255, 0, 1) }
.csharpcode .html { color: rgba(128, 0, 0, 1) }
.csharpcode .attr { color: rgba(255, 0, 0, 1) }
.csharpcode .alt { background-color: rgba(244, 244, 244, 1);  100%; margin: 0 }
.csharpcode .lnum { color: rgba(96, 96, 96, 1) }

.test{

    background:-webkit-linear-gradient(bottom left,#fff,#000);

    background:-moz-linear-gradient(bottom left,#fff,#000);

    background:-o-linear-gradient(bottom left,#fff,#000);

    background:linear-gradient(bottom left,#fff,#000);

.csharpcode, .csharpcode pre { font-size: small; color: rgba(0, 0, 0, 1); font-family: consolas, "Courier New", courier, monospace; background-color: rgba(255, 255, 255, 1) }
.csharpcode pre { margin: 0 }
.csharpcode .rem { color: rgba(0, 128, 0, 1) }
.csharpcode .kwrd { color: rgba(0, 0, 255, 1) }
.csharpcode .str { color: rgba(0, 96, 128, 1) }
.csharpcode .op { color: rgba(0, 0, 192, 1) }
.csharpcode .preproc { color: rgba(204, 102, 51, 1) }
.csharpcode .asp { background-color: rgba(255, 255, 0, 1) }
.csharpcode .html { color: rgba(128, 0, 0, 1) }
.csharpcode .attr { color: rgba(255, 0, 0, 1) }
.csharpcode .alt { background-color: rgba(244, 244, 244, 1); 100%; margin: 0 }
.csharpcode .lnum { color: rgba(96, 96, 96, 1) }

3、上面兩種寫法只能夠畫出有限的幾種漸變。我們可以使用角度來設置漸變的起點。

以下面的代碼為模板，將“0deg”修改成你想要的角度

.deg0{

    background:-webkit-linear-gradient(0deg,#fff,#000);

    background:-moz-linear-gradient(0deg,#fff,#000);

    background:-o-linear-gradient(0deg,#fff,#000);

    background:linear-gradient(0deg,#fff,#000);

我添加了12個div，以30deg為差值。

根據結果，我又畫出了這張圖

可以看出，在使用角度設定漸變起點的時候，0deg對應botton，90deg對應left，180deg對應top，360deg對應right。整個過程就是以bottom為起點逆時針旋轉。

關于起點的內容我暫時只了解到這么多，以后如果草案做了修改，我了解之后會立馬更新。

漸變顏色設置也可以花樣繁多：

漸變的顏色可以不止兩種，在起點顏色和終點顏色之間可以添加更多顏色。

.test{

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

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

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

    background:linear-gradient(top,#fff,red,#000,red);

或者：

.test{

    background:-webkit-linear-gradient(top,red,yellow,blue,green,purple,orange);

    background:-moz-linear-gradient(top,red,yellow,blue,green,purple,orange);

    background:-o-linear-gradient(top,red,yellow,blue,green,purple,orange);

    background:linear-gradient(top,red,yellow,blue,green,purple,orange);

上面的例子中，顏色的漸變都是均勻的，我們也可以給每一種顏色指點漸變的位置，從而使漸變不是單純的均勻變化，這個也很簡單，只要在你想修改的顏色后面加上漸變的文職就可以了。為了簡單直觀，我只用三種顏色。

均勻變化

.test{

    background:-webkit-linear-gradient(red ,green,blue);

    background:-moz-linear-gradient(red ,green,blue);

    background:-o-linear-gradient(red ,green,blue);

    background:linear-gradient(red ,green,blue);

添加了位置后

.test{

    background:-webkit-linear-gradient(red 50% ,green,blue);

    background:-moz-linear-gradient(red 50% ,green,blue);

    background:-o-linear-gradient(red 50% ,green,blue);

    background:linear-gradient(red 50% ,green,blue);

當然，如果顏色格式使用CSS3中的rgba格式，那么漸變將會是透明的。

關于線性漸變（linear-gradient）的介紹就到此為止了，有錯誤之處歡迎留言。

等我研究了徑向漸變（radial-gradient）我在不上徑向漸變的筆記

總結

以上是生活随笔為你收集整理的CSS3学习笔记之linear-gradient的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【数字图像处理之（二）】图像的分类
下一篇： QTcpSocket 对连接服务器中断的