整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
次來看一個帶特殊圓角導航欄布局，如下谷歌瀏覽器的標簽欄：
這樣一個布局如何實現(xiàn)呢？
CSS 漸變幾乎是無所不能的，什么的圖形都能繪制，這里可以拆分一下，兩個矩形，兩個圓形，還有兩個反向圓角，也就是 2 個 線性漸變，4 個徑向漸變，示意如下：
最終實時效果如下（上面是原理圖）
完整代碼如下：
SS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩(wěn)的過渡。
以前，你必須使用圖像來實現(xiàn)這些效果。但是，通過使用 CSS3 漸變（gradients），你可以減少下載的事件和寬帶的使用。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。
CSS3 定義了兩種類型的漸變（gradients）：
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
徑向漸變（Radial Gradients）- 由它們的中心定義
瀏覽器支持
表中的數(shù)字指定了完全支持該屬性的第一個瀏覽器版本。
后邊跟 -webkit-、-moz- 或 -o- 的數(shù)字指定了需加上前綴才能支持屬性的第一個版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| linear-gradient | 10.0 | 26.0 10.0 -webkit- | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
| radial-gradient | 10.0 | 26.0 10.0 -webkit- | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.6 -o- |
| repeating-linear-gradient | 10.0 | 26.0 10.0 -webkit- | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
| repeating-radial-gradient | 10.0 | 26.0 10.0 -webkit- | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.6 -o- |
CSS3 線性漸變
為了創(chuàng)建一個線性漸變，你必須至少定義兩種顏色結點。顏色結點即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時，你也可以設置一個起點和一個方向（或一個角度）。
線性漸變的實例：
background: linear-gradient(direction, color-stop1, color-stop2, ...);
線性漸變 - 從上到下（默認情況下）
下面的實例演示了從頂部開始的線性漸變。起點是紅色，慢慢過渡到藍色：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#btn{
height:200px;
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background:linear-gradient(red, blue); /* 標準的語法（必須放在最后） */
}
</style>
</head>
<body>
<div id="btn"></div>
</body>
</html>
變是兩種或更多顏色的平滑過渡，是指在顏色集上使用逐步抽樣算法，并將結果應用于描邊樣式和填充樣式中。canvas的繪圖上下文支持兩種類型的漸變：線性漸變和放射性漸變，其中放射性漸變也稱徑向漸變。
繪制漸變圖形
創(chuàng)建一個簡單的漸變非常容易，可能比使用Photoshop還要快，需要三個步驟。
（1）創(chuàng)建漸變對象。
var gradient=cxt.createRadialGradient（0，0，0，canvas.height）；
（2）為漸變對象設置顏色，指明過渡方式。
gradient.addColorStop(0,'#fff');
gradient.addColorStop(1,'#000');
（3）在context上為填充樣式或者描邊樣式設置漸變。
cxt.fillStyle=gradient;
要設置顯示顏色，在漸變對象上使用addColorStop函數(shù)即可。除了可以變換成其他顏色外，還可以為顏色設置alpha值（例如透明），并且alpha值也是可以變換的。為了達到這樣的效果，需要使用顏色值的另一種表示方法，如內(nèi)置alpha組建的CSSrgba函數(shù)。
繪制線性漸變，會使用到如下表所示幾個方法。
（1）編寫代碼如下圖所示：
（2）在瀏覽器中打開文件，預覽效果圖如下所示，可以看到網(wǎng)頁中創(chuàng)建了一個垂直方向上的漸變，從上到下顏色逐漸變淺。
小提示：上面的代碼是2D環(huán)境對象產(chǎn)生了一個線性漸變對像，漸變的起始點是（0,0），漸變的結束點是（0，canvas.height），下面使用addColorStop函數(shù)設置漸變顏色，最后將漸變填充到上下文環(huán)境的樣式中。
下次將講繪制徑向漸變，HTML繪制漸變圖形（二）
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
