html5+css3中的background: -…

http://hi.baidu.com/zyyhyzazwm/item/72dc6c9a40513acf1a49df56<wbr></wbr>

html5+css3中的background: -moz-linear-gradient 用法

在CSS中background:<wbr>-moz-linear-gradient<wbr>让网站背景渐变的属性，目前火狐3.6以上版本和google浏览器支持这个属性。<br></wbr></wbr>

background:<wbr>-moz-linear-gradient(top,<wbr><wbr>#bccfe3<wbr>0%,<wbr>#d2dded<wbr>100%);<wbr><wbr>适合<wbr>FF3.6+<wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

background:<wbr>-webkit-gradient(linear,<wbr>left<wbr>top,<wbr>left<wbr>bottom,<wbr>color-stop(0%,#bccfe3),<wbr>color-stop(100%,#d2dded));<wbr>适合<wbr>Chrome,Safari4+<wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

background:<wbr>-webkit-linear-gradient(top,<wbr><wbr>#bccfe3<wbr>0%,#d2dded<wbr>100%);<wbr><wbr>适合Chrome10+,Safari5.1+</wbr></wbr></wbr></wbr></wbr></wbr></wbr>

background:<wbr>-o-linear-gradient(top,<wbr><wbr>#bccfe3<wbr>0%,#d2dded<wbr>100%);<wbr><wbr>适合Opera<wbr>11.10+</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

background:<wbr>-ms-linear-gradient(top,<wbr><wbr>#bccfe3<wbr>0%,#d2dded<wbr>100%);<wbr>适合IE10+<wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

background:<wbr>linear-gradient(top,<wbr><wbr>#bccfe3<wbr>0%,#d2dded<wbr>100%);<wbr><wbr><wbr><wbr><wbr>适合W3C</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

背景使用CSS渐变显示可以不使用图像就实现两个或两个以上的指定颜色的平滑过渡。这反过来又减少了下载时间和带宽的使用，放大时也比较好看，可以让您创造出一个更灵活的布局。

Firefox支持两种类型的CSS渐变：线性的(-moz-linear-gradient)和放射状的(-moz-radial-gradient)。

三、线性渐变(Linear<wbr>Gradients) <p style="margin: 0px; padding: 0px;"> 要创建一个线性渐变，您需要设置一个起点和一个渐变的方向（或角度），并定义起止颜色。</p> -moz-linear-gradient(<wbr>[<wbr>||<wbr>,]?<wbr>,<wbr><wbr>[,<wbr>]*<wbr>) <p style="margin: 0px; padding: 0px;"> <strong>起始点(Starting<wbr>Point)：</wbr></strong>起点的工作方式类似于background<wbr>position。您可以设置水平和垂直位置为百分比，或以像素为单位，或在水平方向上可以使用left/center/right，在垂直方向上可以使用top/center/bottom。位置起始于左上角。如果你不指定水平或垂直位置，它将默认为center。</wbr></p> <p style="margin: 0px; padding: 0px;"> 例如，这里是一个线性渐变，开始于center（水平发现）和top（垂直发现），并从蓝色到白色。</p> <img width="116" height="116" src="http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif" real_src="http://h.hiphotos.baidu.com/album/pic/item/a1ec08fa513d269796645ebf55fbb2fb4216d899.jpg" style="margin-bottom: 8px; clear: both; max-width: 758px; vertical-align: top;" alt="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法" title="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法"><p style="margin: 0px; padding: 0px;">代码如下：</p> .linear_gradient_square<wbr>{<wbr>width:<wbr>100px;<wbr>height:<wbr>100px;<wbr>border:<wbr>1px<wbr>solid<wbr>#333;<wbr>background:<wbr>-moz-linear-gradient(top,<wbr>blue,<wbr>white);} <p style="margin: 0px; padding: 0px;"> 或者是起始于left（水平方向）和center（垂直方向）</p> <img width="111" height="111" src="http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif" real_src="http://c.hiphotos.baidu.com/album/pic/item/279759ee3d6d55fb607120c46d224f4a21a4dd99.jpg" style="margin-bottom: 8px; clear: both; max-width: 758px; vertical-align: top;" alt="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法" title="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法"><p style="margin: 0px; padding: 0px;">主要部分代码如下：</p> background:<wbr>-moz-linear-gradient(left,<wbr>blue,<wbr>white); <p style="margin: 0px; padding: 0px;"> 或者是起始于left（水平方向）和top（垂直方向）</p> <img width="109" height="110" src="http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif" real_src="http://h.hiphotos.baidu.com/album/pic/item/42166d224f4a20a491a96a2590529822730ed099.jpg" style="margin-bottom: 8px; clear: both; max-width: 758px; vertical-align: top;" alt="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法" title="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法"><p style="margin: 0px; padding: 0px;">主要部分代码如下：</p> background:<wbr>-moz-linear-gradient(left<wbr>top,<wbr>blue,<wbr>white); <p style="margin: 0px; padding: 0px;"> <strong>角度(Angle)：</strong>正如您在上面看到的，如果您不指定一个角度，它会根据起始位置自动定义。如果你想更多的控制渐变的方向，您不妨设置角度试试。</p> <p style="margin: 0px; padding: 0px;"> 例如，下面的两个渐变具有相同的起点left<wbr>center，但是右手边的有一个20度的角度。</wbr></p> <img width="231" height="119" src="http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif" real_src="http://c.hiphotos.baidu.com/album/pic/item/21a4462309f7905242a811dc0cf3d7ca7acbd599.jpg" style="margin-bottom: 8px; clear: both; max-width: 758px; vertical-align: top;" alt="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法" title="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法"><p style="margin: 0px; padding: 0px;">后面一个含有角度的渐变核心代码如下：</p> background:<wbr>-moz-linear-gradient(left<wbr>20deg,<wbr>black,<wbr>white); <p style="margin: 0px; padding: 0px;"> 当指定的角度，请记住，它是一个由水平线与渐变线产生的的角度，逆时针方向。因此，使用0deg将产生一个左到右横向梯度，而90度将创建一个从底部到顶部的垂直渐变。</p> <img width="487" height="124" src="http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif" real_src="http://f.hiphotos.baidu.com/album/pic/item/4ec2d5628535e5ddc2b2f33d76c6a7efcf1b62b1.jpg" style="margin-bottom: 8px; clear: both; max-width: 758px; vertical-align: top;" alt="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法" title="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法"><p style="margin: 0px; padding: 0px;">核心代码如下：</p> background:<wbr>-moz-linear-gradient(,<wbr>red,<wbr>white); <p style="margin: 0px; padding: 0px;"> <strong>起止颜色(Color<wbr>Stops)：</wbr></strong>除了起始位置和角度，你应该指定起止颜色。起止颜色是沿着渐变线，将会在指定位置（以百分比或长度设定）含有指定颜色的点。色彩的起止数是无限的。如果您使用一个百分比位置，0％代表起点和100％是终点，但区域外的值可以被用来达到预期的效果。</p> <p style="margin: 0px; padding: 0px;"> 下面是一个简单的例子，三个起止颜色。因为第一个和最后的颜色并未指定颜色点，他们将显示为默认的0％和100％。</p> <img width="108" height="112" src="http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif" real_src="http://b.hiphotos.baidu.com/album/pic/item/e61190ef76c6a7efe7b8fec4fdfaaf51f2de66b1.jpg" style="margin-bottom: 8px; clear: both; max-width: 758px; vertical-align: top;" alt="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法" title="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法">background:<wbr>-moz-linear-gradient(top,<wbr>blue,<wbr>white<wbr>80%,<wbr>orange); <p style="margin: 0px; padding: 0px;">如果没有指定位置，颜色会均匀分布。</p> <img width="113" height="116" src="http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif" real_src="http://c.hiphotos.baidu.com/album/pic/item/7c1ed21b0ef41bd5dfafbe1651da81cb38db3d57.jpg" style="margin-bottom: 8px; clear: both; max-width: 758px; vertical-align: top;" alt="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法" title="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法"><p style="margin: 0px; padding: 0px;">核心代码如下：</p> background:<wbr>-moz-linear-gradient(left,<wbr>red,<wbr>orange,<wbr>yellow,<wbr>green,<wbr>blue); <p style="margin: 0px; padding: 0px;"> <strong>透明度(Transparency)：</strong>还支持透明渐变。这是相当有用的，例如，当堆叠多个背景时。这里是两个背景的结合：一张图片，一个白色到透明的线性渐变。</p> <img width="640" height="118" src="http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif" real_src="http://f.hiphotos.baidu.com/album/pic/item/bf096b63f6246b60e9b9e496ebf81a4c500fa299.jpg" style="margin-bottom: 8px; clear: both; max-width: 758px; vertical-align: top;" alt="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法" title="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法"><img width="640" height="118" src="http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif" real_src="http://h.hiphotos.baidu.com/album/pic/item/730e0cf3d7ca7bcbd5cc91cdbe096b63f724a899.jpg" style="margin-bottom: 8px; clear: both; max-width: 758px; vertical-align: top;" alt="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法" title="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法"><p style="margin: 0px; padding: 0px;">核心代码如下：</p> .multibackground_transparent<wbr>{<wbr>background:<wbr>-moz-linear-gradient(right,<wbr>rgba(255,255,255,0),<wbr>rgba(255,255,255,1)),<wbr>url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);}四、径向渐变(Radial<wbr>Gradients) <p style="margin: 0px; padding: 0px;">为径向渐变的语法非常类似于线性渐变。</p> -moz-radial-gradient([<wbr>||<wbr>,]?<wbr>[<wbr>||<wbr>,]?<wbr>,<wbr>[,<wbr>]*); <p style="margin: 0px; padding: 0px;"> 除了您已经在线性渐变中看到的起始位置，方向，和颜色，径向梯度允许你指定渐变的形状（圆形或椭圆形）和大小（最近端，最近角，最远端，最远角，包含或覆盖<wbr>(closest-side,<wbr>closest-corner,<wbr>farthest-side,<wbr>farthest-corner,<wbr>contain<wbr>or<wbr>cover)）。</wbr></wbr></wbr></wbr></wbr></wbr></wbr></p> <p style="margin: 0px; padding: 0px;"> <strong>颜色起止(Color<wbr>stops)：</wbr></strong>就像用线性渐变，你应该沿着渐变线定义渐变的起止颜色。下面的圆具有相同的起止颜色，但在左边的为默认的颜色间隔均匀的渐变，而右边的每种颜色都有特定的位置。</p> <img width="243" height="115" src="http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif" real_src="http://e.hiphotos.baidu.com/album/pic/item/1b4c510fd9f9d72a8cd346ffd42a2834359bbb99.jpg" style="margin-bottom: 8px; clear: both; max-width: 758px; vertical-align: top;" alt="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法" title="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法"><wbr>background:<wbr>-moz-radial-gradient(red,<wbr>yellow,<wbr>#1E90FF);<wbr>background:<wbr>-moz-radial-gradient(red<wbr>5%,<wbr>yellow<wbr>25%,<wbr>#1E90FF<wbr>50%); <p style="margin: 0px; padding: 0px;"> <strong>形状(Shape)：</strong>在这里你可以看到两个可能的形状间的差异，一个圆（左侧）和椭圆（右侧），两者都起始于bottom<wbr>left：</wbr></p> <img width="544" height="116" src="http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif" real_src="http://f.hiphotos.baidu.com/album/pic/item/cc11728b4710b912ad3da01cc3fdfc0393452257.jpg" style="margin-bottom: 8px; clear: both; max-width: 758px; vertical-align: top;" alt="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法" title="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法"><wbr>.radial_gradient_circle<wbr>{<wbr>background:<wbr>-moz-radial-gradient(bottom<wbr>left,<wbr>circle,<wbr>red,<wbr>yellow,<wbr>#1E90FF);}<wbr>.radial_gradient_ellipse<wbr>{<wbr>background:<wbr>-moz-radial-gradient(bottom<wbr>left,<wbr>ellipse,<wbr>red,<wbr>yellow,<wbr>#1E90FF);} <p style="margin: 0px; padding: 0px;"> <strong>大小(Size)：</strong>size的不同选项(closest-side,<wbr>closest-corner,<wbr>farthest-side,<wbr>farthest-corner,<wbr>contain<wbr>or<wbr>cover)指向被用来定义圆或椭圆大小的点。</wbr></wbr></wbr></wbr></wbr></wbr></p> <p style="margin: 0px; padding: 0px;">示例：椭圆的近边VS远角<br> 下面的两个椭圆有不同的大小。左边的一个是由从起始点(center)到近边的距离设定的，而右边的一个是由从起始点到远角的的距离决定的。</p> <img width="500" src="http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif" real_src="http://hiphotos.baidu.com/miqike163/pic/item/aaf3380bbe096b63280094ed0c338744eaf8acb9.jpg" style="margin-bottom: 8px; clear: both; max-width: 758px; vertical-align: top;" alt="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法" title="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法"><wbr>background:<wbr>-moz-radial-gradient(ellipse<wbr>closest-side,<wbr>red,<wbr>yellow<wbr>10%,<wbr>#1E90FF<wbr>50%,<wbr>white);<wbr>background:<wbr>-moz-radial-gradient(ellipse<wbr>farthest-corner,<wbr>red,<wbr>yellow<wbr>10%,<wbr>#1E90FF<wbr>50%,<wbr>white);<img width="508" height="172" src="http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif" real_src="http://b.hiphotos.baidu.com/album/pic/item/37d3d539b6003af3c3258a82352ac65c1138b6b1.jpg" style="margin-bottom: 8px; clear: both; max-width: 758px; vertical-align: top;" alt="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法" title="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法"><p style="margin: 0px; padding: 0px;">示例：圆的近边VS远边<br> 左边的圆的渐变大小由起始点(center)到近边的距离决定，而右边的圆则有起始点到远边的距离决定。</p> <img width="541" height="114" src="http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif" real_src="http://a.hiphotos.baidu.com/album/pic/item/a2cc7cd98d1001e921a242edb80e7bec55e797b1.jpg" style="margin-bottom: 8px; clear: both; max-width: 758px; vertical-align: top;" alt="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法" title="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法"><wbr>background:<wbr>-moz-radial-gradient(circle<wbr>closest-side,<wbr>red,<wbr>yellow<wbr>10%,<wbr>#1E90FF<wbr>50%,<wbr>white);<wbr>background:<wbr>-moz-radial-gradient(circle<wbr>farthest-side,<wbr>red,<wbr>yellow<wbr>10%,<wbr>#1E90FF<wbr>50%,<wbr>white); <p style="margin: 0px; padding: 0px;">示例：包含圆<br> 在这里你可以看到左侧的默认圈，同一渐变版本，但是被包含的右边的圆。</p> <img width="241" height="116" src="http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif" real_src="http://a.hiphotos.baidu.com/album/pic/item/14ce36d3d539b600c2795955e950352ac75cb799.jpg" style="margin-bottom: 8px; clear: both; max-width: 758px; vertical-align: top;" alt="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法" title="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法"><wbr>background:<wbr>-moz-radial-gradient(red,<wbr>yellow,<wbr>#1E90FF);<wbr>background:<wbr>-moz-radial-gradient(contain,<wbr>red,<wbr>yellow,<wbr>#1E90FF);五、重复渐变(Repeating<wbr>Gradients) <p style="margin: 0px; padding: 0px;"> 如果您想重复一个渐变，您可以使用-moz-repeating-linear-gradient和-moz-repeating-radial-gradient。</p> <p style="margin: 0px; padding: 0px;"> 在下面的例子，每个实例都指定了四个起止颜色，并无限重复。</p> <img width="257" height="117" src="http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif" real_src="http://d.hiphotos.baidu.com/album/pic/item/b7003af33a87e950cea0a58e10385343faf2b499.jpg" style="margin-bottom: 8px; clear: both; max-width: 758px; vertical-align: top;" alt="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法" title="html5+css3中的background:&lt;wbr&gt;-moz-linear-gradient&lt;wbr&gt;用法"><wbr>.repeating_radial_gradient_example<wbr>{<wbr>background:<wbr>-moz-repeating-radial-gradient(black,<wbr>black<wbr>5px,<wbr>white<wbr>5px,<wbr>white<wbr>10px);}<wbr>.repeating_linear_gradient_example<wbr>{<wbr>background:<wbr>-moz-repeating-linear-gradient(top<wbr>left<wbr>-45deg,<wbr>red,<wbr>red<wbr>5px,<wbr>white<wbr>5px,<wbr>white<wbr>10px);}</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>