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