首页 > 代码库 > 纯css径向渐变(CSS3--Gradient)

纯css径向渐变(CSS3--Gradient)

2024-07-16 15:08:23   220人阅读

渐变

一、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内核的浏览器下才能正常显示。


联系
我们