純css放射狀漸層(CSS3--Gradient)

標籤：style   blog   http   color   os   io   strong   for   

漸層

一、CSS3的放射狀漸層

網址：http://www.spritecow.com 映像拼接技術

CSS3 Gradient分為linear-gradient(線性漸層)和radial-gradient(放射狀漸層)。

html代碼：

1 <h1>Hold the front page</h1>2 <p>Now you get the nitty-gritty of the story.</p>3 <p>The most important information is delivered first.</p>4 <h1>Extra!Extra!</h1>5 <p>Further developments are unfolding.</p>6 <p>You can read all about it here.</p>

css代碼：

1 *{margin:0; padding:0;}2 html{ height:100%;3      background:-webkit-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%);4      background: -moz-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%);5      background: -ms-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%)6      background: -o-radial-gradient(center center,circle cover,#0091d5 0%,#0091d5 15%,#004a86 100%)}7 body{ background:url(index.png); height:100%; color:#3CC;}

注釋：radial:[?re?di?l] 徑向的。  gradient：[?gre?di?nt] 傾斜，梯度，陡度。circle:[‘s?:kl] 圓

二、線性漸層在Mozilla下的應用

文法：

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

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

根據上面的介紹，我們先來看一個簡單的例子：

HTML：

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

CSS：

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

現在我們給這個div應用一個簡單的漸層樣式：

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

效果如下：

 

 

 

註：這個效果暫時只有在Mozilla核心的瀏覽器下才能正常顯示。