CSS3 Gradient is divided into linear-gradient and radial-gradient. Today, we mainly analyze the specific usage of linear gradients. In order to better apply CSS3 Gradient, we need to first understand the cores of several modern browsers, mainly Mozilla (Firefox, Flock, etc.), WebKit (Safari, Chrome, etc.), Opera (Opera browser), Trident ( Annoying IE browser).
This article ignores IE as usual. We mainly look at applications under Mozilla, Webkit, Opera. Of course, it can also be implemented under IE. It needs to be achieved through IE-specific filters, which will be listed later. The syntax of the filter is explained, but it will not specifically introduce how to use it. If you are interested, you can search for related technical documents.
1. Application of linear gradient under Mozilla
Syntax:
Parameters: There are three parameters in total. The first parameter indicates the direction of the linear gradient, top is from top to bottom, and left is from left to right. If Defined as left top, that is from the upper left corner to the lower right corner. The second and third parameters are the start point color and the end point color, respectively. You can also insert more parameters between them to indicate the gradient of multiple colors. As shown in the picture:
Based on the above introduction, let’s first look at a simple example:
HTML:
"example example1" >
CSS:
.example { width : 150px ; height : 80px ; } 如Without special instructions, our following examples are the basic code of applying this section of html and css.
Now we apply a simple gradient style to this div:
.example 1 { < /div>
background : -moz-linear-gradient( top , # ccc , #000 ); < /div>
} The effect is as follows:
Two, linear gradient under Webkit Application
Syntax:
-webkit-linear-gradient( [ || ,]? , [, ]* )//Latest released writing grammar -webkit-gradient(, [, ]?, [, ]? [, ]*) //Old-style grammar writing Rules Parameter:-webkit-gradient is the implementation parameter of webkit engine for gradient, there are five in total. The first parameter indicates the type of gradient, which can be linear (linear gradient) or radial (radial gradient). The second parameter and the third parameter are both a pair of values, representing the start and end of the gradient respectively. This pair of values can be expressed in the form of coordinates or key values, such as left top (upper left corner) and left bottom (lower left corner). The fourth and fifth parameters are two color-stop functions. The color-stop function accepts two parameters, the first represents the position of the gradient, 0 is the starting point, 0.5 is the midpoint, and 1 is the end point; the second represents the color of the point. As shown:
Let’s look at an old fashioned one first Example of how to write:
background : -webkit-gradient(linear, center top , center bottom ,from( #ccc ), to( #000 )); The effect is as follows:
Then we will look at the new style of writing:
-webkit-linear-gradient( top , #ccc , #000 ); I won’t post this effect anymore. You can see it in the browser. Are they consistent in effect. Comparing carefully, the learning methods of the two under Mozilla and Webkit are basically the same, but the prefix is different. Of course, when they can be unified into the same, it is of course better for us, so we don’t have to deal with it. . Will greatly save our development time.
3. Application of linear gradient under Opera
Syntax:
-o-linear-gradient([ || ,]? , [, ]); /* Opera 11.10+ */ Parameters:-o-linear-gradient has three parameters. The first parameter represents the direction of the linear gradient, top is from top to bottom, left is from left to right, if defined as left top, it is from upper left corner to lower right corner. The second and third parameters are the start point color and the end point color, respectively. You can also insert more parameters between them to indicate the gradient of multiple colors. (Note: Opera supports limited versions. The tests in this example are all under Opera 11.1, and there will be no prompts later), as shown in the figure:
Sample code:
background : -o-linear-gradient( top , #ccc , #000 ); The effect is shown in the figure:
Four, linear gradient in Trident ( IE)
Syntax:
filter: progid:DXImageTransform.Microsoft.gradient(GradientT ype= 0 , startColorstr= #1471da , endColorstr= #1C85FB ); /*IE<9>*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)" ; /*IE8+*/ IE relies on filters to achieve gradients. startColorstr represents the color of the starting point, and endColorstr represents the color of the ending point. GradientType represents the gradient type, 0 is the default value, which means vertical gradient, and 1 means horizontal gradient. As shown in the picture:
Above we mainly introduced the implementation method of linear gradient under the above four core modules, and then we mainly aim at linear gradient to implement various linear gradient examples under the three modules of Mozilla, Webkit, and Opera:
< p> From the above syntax, we can clearly know that to create a linear gradient, we need to create a starting point and a gradient direction (or angle), and define a starting color:
-moz-linear-gradient( [ || < angle>,]? , [, ]* ) -webkit -linear-gradient( [ || ,]? , [, ]* ) -o-linear-gradient( [ || ,]? , [, ]* ) The specific applications are as follows:
background :-moz-linear-gradient( left < code class="css plain">, #ace , #f96 ); /*Mozilla*/ background :-webkit-gradient(linear, 0 50% , 100% 50% ,from( #ace ),to( #f96 )); /*Old gradient for webkit*/ background :-webkit-linear-gradient( left , #ace , code> #f96 ); /*new gradient for Webkit*/< /code>
background :-o-linear-gradient(< /code> left , #ace , #f96 ); / *Opera11*/ The effect is as follows:
Starting point (Star ting Point) works like background position. You can set the horizontal and vertical position as a percentage, or in pixels, or you can use left/center/right in the horizontal direction and top/center/bottom in the vertical direction. The position starts at the upper left corner. If you do not specify the horizontal or vertical position, it will default to center. Its working methods mainly include: Top → Bottom, Left → Right, bottom → top, right → left, etc. Then we mainly look at the effect of its realization:
1, start In center (horizontal direction) and top (vertical direction) that is Top → Bottom:
/* Firefox 3.6+ */ background : -moz-linear-gradient( top , #ace , #f96 ); /* Safari 4-5, Chrome 1- 9 */ /* -webkit-gradient(, [, ]?, [, ]? [, ]*) */ background : -webkit-gradient(linear, top ,from( #ace ),to(< /code> #f96 )); background code> : -webkit-linear-gradient( top , #ace , #f96 );
/* Opera 11.10+ */ < div class="li ne number9 index8 alt2"> background : -o-linear-gradient( top , #ace , #f96 );
Effect:
< p> 
2, start from left (horizontal direction) And center (vertical direction) is also Left → Right:
/* Firefox 3.6+ */ background code> : -moz-linear-gradient( left , #ace , #f96 ); /* Safari 5.1+, Chrome 10+ */ background : -webkit-linear-gradient( left < code class="css plain">, #ace , #f96 ); /* Opera 11.10 + */ background : -o-linear -gradient( left , #ace #f96 ); The effect of is as follows:
3, starting from left (horizontal direction) and top (vertical direction):
background : -moz-linear-gradient( left top , #ace , #f96 ); background : -webkit-linear-gradient( left top , #ace , code> #f96 ); background : -o-linear-gradient( left top , #ace ,< /code> #f96 ); The effect is as follows ：
4, Linear Gradient (with Even Stops):
/* Firefox 3.6+ */ background : -moz-linear-gradient( left , #ace , #f96 , #ace< /code> , #f96 , #ace ); /* Safari 4-5, Chrome 1-9 */ background : -webkit-gradient(linear, left top , right top , from( #ace ), color-stop( 0.25 , #f96 ), color-stop( 0.5 , #ace ), color-stop( 0.75 , #f96 ), to( #ace )); < div class="line number5 index4 alt2"> /* Safari 5.1+, Chrome 10+ */
: -webkit-linear-gradient( left , #ace , #f96 , #ace , #f96 < code class="css plain">, #ace ); /* Opera 11.10+ */ background : -o-linear-gradient( left , #ace , #f96 , #ace , #f96 , #ace ); The effect is as follows:
5. with Specified Arbitrary Stops:
/* Firefox 3.6+ */ background : -moz-linear-gradient( left , #ace , #f96< /code> 5% , #ace , #f96 95% , #ace ); /* Safari 4-5, Chrome 1-9 */ background : -webkit-gradient(linear, left top , right top , from( #ace ), color-stop( 0.05 , #f96 ), color-stop( 0.5 , #ace< /code> ), color-stop( 0.95 , #f96 ), to( #ace )); /* Safari 5.1+, Chrome 10+ */ background : -webkit-linear-gradient( left , #ace , #f96 5% , #ace , #f96 95% , #ace< /code> ); /* Opera 11.10+ */ background : -o-linear-gradient( left , #ace , #f96 5% #ace , #f96 95% , #ace ); The effect is as follows:
6, Angle:
as above In the example you saw, if you don't specify an angle, it will be automatically defined based on the starting position. If you want more control over the direction of the gradient, you might as well try setting the angle. For example, the two gradients below have the same starting point, left center, but add an angle of 30 degrees.
Sample code without angle:
background : -moz-linear-gradient( left < code class="css plain">, #ace , #f96 ); background : -webkit-linear-gradient( left , #ace , #f96 ); background : -o - linear-gradient( left , #ace , #f96 ); < /div>
plus 30 degree angle code:
background : -moz-linear-gradient( left 30 deg, #ace , #f96 ); background : -webkit-gradient(linear, 0 < code class="css value">0 , 100% 100% , from( #ace ),to ( #f96 )); background : -o-linear-gradient( 30 deg, #ace , #f96 ); The renderings are as follows:
When specifying the angle, remember that it is an angle produced by the horizontal line and the gradient line, counterclockwise. Therefore, using 0deg will produce a left-to-right lateral gradient, while 90 degrees will create a vertical gradient from bottom to top.我来看看你核心代码：
background : -moz-linear-gradient(, #ace , #f96 ); background : -webkit-gradient(,, from( #ace ), to( #f96 )); background : -webkit-linear-gradient(, #ace , #f96 ); background : -o-linear-gradient(, #ace , #f96 ); 我们来看看各角度的区别：
.deg 0 { background : -moz-linear-gradient( 0 deg, #ace , #f96 ); background : -webkit-gradient(linear, 0 50% , 100% 50% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 0 deg, #ace , #f96 ); background : -o-linear-gradient( 0 deg, #ace , #f96 ); } .deg 45 { background : -moz-linear-gradient( 45 deg, #ace , #f96 ); background : -webkit-gradient(linear, 0 100% , 100% 0% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 45 deg, #ace , #f96 ); background : -o-linear-gradient( 45 deg, #ace , #f96 ); } .deg 90 { background : -moz-linear-gradient( 90 deg, #ace , #f96 ); background : -webkit-gradient(linear, 50% 100% , 50% 0% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 90 deg, #ace , #f96 ); background : -o-linear-gradient( 90 deg, #ace , #f96 ); } .deg 135 { background : -moz-linear-gradient( 135 deg, #ace , #f96 ); background : -webkit-gradient(linear, 100% 100% , 0 0 ,from( #ace ),to( )); background : -webkit-linear-gradient( 135 deg, #ace , #f96 ); background : -o-linear-gradient( 135 deg, #ace , #f96 ); } .deg 180 { background : -moz-linear-gradient( 180 deg, #ace , #f96 ); background : -webkit-gradient(linear, 100% 50% , 0 50% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 180 deg, #ace , #f96 ); background : -o-linear-gradient( 180 deg, #ace , #f96 ); } .deg 225 { background : -moz-linear-gradient( 225 deg, #ace , #f96 ); background : -webkit-gradient(linear, 100% 0% , 0 100% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 225 deg, #ace , #f96 ); background : -o-linear-gradient( 225 deg, #ace , #f96 ); } .deg 270 { background : -moz-linear-gradient( 270 deg, #ace , #f96 ); background : -webk it-gradient(linear, 50% 0% , 50% 100% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 270 deg, #ace , #f96 ); background : -o-linear-gradient( 270 deg, #ace , #f96 ); } .deg 315 { background : -moz-linear-gradient( 315 deg, #ace , #f96 ); background : -webkit-gradient(linear, 0% 0% , 100% 100% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 315 deg, #ace , #f96 ); background : -o-linear-gradient( 315 deg, #ace , #f96 ); } .deg 360 { background : -moz-linear-gradient( 360 deg, #ace , #f96 ); background : -webkit-gradient(linear, 0 50% , 100% 50% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 360 deg, #ace , ); background : -o-linear-gradient( 360 deg, #ace , #f96 ); } 效果如下：
除了起始位置和角度，你应该指定起止颜色。起止颜色是沿着渐变线，将会在指定位置（以百分比或长度设定）含有指定颜色的点。色彩的起止数是无限的。如果您使用一个百分比位置，0％代表起点和100％是终点，但区域外的值可以被用来达到预期的效果。这也是通过CSS3 Gradient制作渐变的一个关键所在，其直接影响了你的设计效果，像我们这里的示例都不是完美的效果，只是为了能给大家展示一个渐变的效果，大家就这样先用着吧。我们接着看一下不同的起址色的示例：
background : -moz-linear-gradient( top , #ace , #f96 80% , #f96 ); background : -webkit-linear-gradient( top , #ace , #f96 80% , #f96 ); background : -o-linear-gradient( top , #ace , #f96 80% , #f96 ); 效果如下：
如果没有指定位置，颜色会均匀分布。如下面的示例：
background : -moz-linear-gradient( left , red , #f96 , yellow, green , #ace ); background : -webkit-linear-gradient( left , red , #f96 ,yellow, green , #ace ); background : -o-linear-gradient( left , red , #f96 , yellow, green , #ace ); 效果如下
7、渐变上应用透明度(Transparency)：
透明渐变对于制作一些特殊的效果是相当有用的，例如，当堆叠多个背景时。这里是两个背景的结合：一张图片，一个白色到透明的线性渐变。我们来看一个官网的示例吧：
|
1
2
3
|
background : -moz-linear-gradient( right , rgba( 255 , 255 , 255 , background : -webkit-linear-gradient( right , rgba( 255 , 255 , 255 , 0 ), rgba( 255 , 255 , 255 , 1 )), url (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); background : -o-linear-gradient( right , rgba( 255 , 255 , 255 , 0 ), rgba( 255 , 255 , 255 , 1 )), url (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); |
接着看看效果吧
< p> 
大家可以时入这里和原图做一下比较，是不是很神奇呀。如果想体会的话，快点动手跟我一起做吧。
原文链接： https://www.cnblogs.com/zhaodifont/p/3811514.html
-moz-linear-gradient( [
"example example1" >
"example example1" >.example { width : 150px ; height : 80px ; } .example { width : 150px ; height : 80px ; } .example {
width : 150px ;
height : 80px ;
}
.example 1 { background : -moz-linear-gradient( top , #ccc , #000 ); } .example 1 { background : -moz-linear-gradient( top , #ccc , #000 ); } .example 1 {
background : -moz-linear-gradient( top , #ccc , #000 );
}
-webkit-linear-gradient( [ || ,]? , [, ]* )//最新发布书写语法 -webkit-gradient(, [, ]?, [, ]? [, ]*) //老式语法书写规则 -webkit-linear-gradient( [ || ,]? , [, ]* )//最新发布书写语法 -webkit-gradient(, [, ]?, [, ]? [, ]*) //老式语法书写规则 -webkit-linear-gradient( [
-webkit-gradient(
background : -webkit-gradient(linear, center top , center bottom ,from( #ccc ), to( #000 )); background : -webkit-gradient(linear, center top , center bottom ,from( #ccc ), to( #000 ));
-webkit-linear-gradient( top , #ccc , #000 ); -webkit-linear-gradient( top , #ccc , #000 );
-o-linear-gradient([ || ,]? , [, ]); /* Opera 11.10+ */ -o-linear-gradient([ /* Opera 11.10+ */
background : -o-linear-gradient( top , #ccc , #000 ); background : -o-linear-gradient( top , #ccc , #000 );
filter: progid:DXImageTransform.Microsoft.gradient(GradientType= 0 , startColorstr= #1471da , endColorstr= #1C85FB ); /*IE<9>*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)" ; /*IE8+*/ filter: progid:DXImageTransform.Microsoft.gradient(GradientType= 0 , startColorstr= #1471da , endColorstr= #1C85FB ); /*IE<9>*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)" ; /*IE8+*/ filter: progid:DXImageTransform.Microsoft.gradient(GradientType= 0 , startColorstr= #1471da , endColorstr= #1C85FB ); /*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)" ; /*IE8+*/
-moz-linear-gradient( [ || ,]? , [, ]* ) -webkit-linear-gradient( [ || ,]? , [, ]* ) -o-linear-gradient( [ || ,]? , [, ]* ) -moz-linear-gradient( [ || ,]? , [, ]* ) -webkit-linear-gradient( [ || ,]? , [, ]* ) -o-linear-gradient( [ || ,]? , [, ]* ) -moz-linear-gradient( [
-webkit-linear-gradient( [
-o-linear-gradient( [
background :-moz-linear-gradient( left , #ace , #f96 ); /*Mozilla*/ background :-webkit-gradient(linear, 0 50% , 100% 50% ,from( #ace ),to( #f96 )); /*Old gradient for webkit*/ background :-webkit-linear-gradient( left , #ace , #f96 ); /*new gradient for Webkit*/ background :-o-linear-gradient( left , #ace , #f96 ); /*Opera11*/ background :-moz-linear-gradient( left , #ace , #f96 ); /*Mozilla*/ background :-webkit-gradient(linear, 0 50% , 100% 50% ,from( #ace ),to( #f96 )); /*Old gradient for webkit*/ background :-webkit-linear-gradient( left , #ace , #f96 ); /*new gradient for Webkit*/ background :-o-linear-gradient( left , #ace , #f96 ); /*Opera11*/ background :-moz-linear-gradient( left , #ace , #f96 ); /*Mozilla*/
background :-webkit-gradient(linear, 0 50% , 100% 50% ,from( #ace ),to( #f96 )); /*Old gradient for webkit*/
background :-webkit-linear-gradient( left , #ace , #f96 ); /*new gradient for Webkit*/
background :-o-linear-gradient( left , #ace , #f96 ); /*Opera11*/
/* Firefox 3.6+ */ background : -moz-linear-gradient( top , #ace , #f96 ); /* Safari 4-5, Chrome 1-9 */ /* -webkit-gradient(, [, ]?, [, ]? [, ]*) */ background : -webkit-gradient(linear, top ,from( #ace ),to( #f96 )); /* Safari 5.1+, Chrome 10+ */ background : -webkit-linear-gradient( top , #ace , #f96 ); /* Opera 11.10+ */ background : -o-linear-gradient( top , #ace , #f96 ); /* Firefox 3.6+ */ background : -moz-linear-gradient( top , #ace , #f96 ); /* Safari 4-5, Chrome 1-9 */ /* -webkit-gradient(, [, ]?, [, ]? [, ]*) */ background : -webkit-gradient(linear, top ,from( #ace ),to( #f96 )); /* Safari 5.1+, Chrome 10+ */ background : -webkit-linear-gradient( top , #ace , #f96 ); /* Opera 11.10+ */ background : -o-linear-gradient( top , #ace , #f96 ); /* Firefox 3.6+ */
background : -moz-linear-gradient( top , #ace , #f96 );
/* Safari 4-5, Chrome 1-9 */
/* -webkit-gradient(, [, ]?, [, ]? [, ]*) */
background : -webkit-gradient(linear, top ,from( #ace ),to( #f96 ));
/* Safari 5.1+, Chrome 10+ */
background : -webkit-linear-gradient( top , #ace , #f96 );
/* Opera 11.10+ */
background : -o-linear-gradient( top , #ace , #f96 );
/* Firefox 3.6+ */ background : -moz-linear-gradient( left , #ace , #f96 ); /* Safari 5.1+, Chrome 10+ */ background : -webkit-linear-gradient( left , #ace , #f96 ); /* Opera 11.10+ */ background : -o-linear-gradient( left , #ace , #f96 ); /* Firefox 3.6+ */ background : -moz-linear-gradient( left , #ace , #f96 ); /* Safari 5.1+, Chrome 10+ */ background : -webkit-linear-gradient( left , #ace , #f96 ); /* Opera 11.10+ */ background : -o-linear-gradient( left , #ace , #f96 ); /* Firefox 3.6+ */
background : -moz-linear-gradient( left , #ace , #f96 );
/* Safari 5.1+, Chrome 10+ */
background : -webkit-linear-gradient( left , #ace , #f96 );
/* Opera 11.10+ */
background : -o-linear-gradient( left , #ace , #f96 );
background : -moz-linear-gradient( left top , #ace , #f96 ); background : -webkit-linear-gradient( left top , #ace , #f96 ); background : -o-linear-gradient( left top , #ace , #f96 ); background : -moz-linear-gradient( left top , #ace , #f96 ); background : -webkit-linear-gradient( left top , #ace , #f96 ); background : -o-linear-gradient( left top , #ace , #f96 ); background : -moz-linear-gradient( left top , #ace , #f96 );
background : -webkit-linear-gradient( left top #ace , #f96 );
background : -o-linear-gradient( left top , #ace , #f96 );
/* Firefox 3.6+ */ background : -moz-linear-gradient( left , #ace , #f96 , #ace , #f96 , #ace ); /* Safari 4-5, Chrome 1-9 */ background : -webkit-gradient(linear, left top , right top , from( #ace ), color-stop( 0.25 , #f96 ) , color-stop( 0.5 , #ace ), color-stop( 0.75 , #f96 ), to( #ace )); /* Safari 5.1+, Chrome 10+ */ background : -webkit-linear-gradient( left , #ace , #f96 , #ace , #f 96 , #ace ); /* Opera 11.10+ */ background : -o-linear-gradient( left , #ace , #f96 , #ace , #f96 , #ace ); /* Firefox 3.6+ */ background : -moz-linear-gradient( left , #ace , #f96 , #ace , #f96 , #ace ); /* Safari 4-5, Chrome 1-9 */ background : -webkit-gradient(linear, left top , right top , from( #ace ), color-stop( 0.25 , #f96 ), color-stop( 0.5 , #ace ), color-stop( 0.75 , #f96 ), to( #ace )); /* Safari 5.1+, Chrome 10+ */ background : -webkit-linear-gradient( left , #ace , #f96 , #ace , #f96 , #ace ); /* Opera 11.10+ */ background : -o-linear-gradient( left , #ace , #f96 , #ace , #f96 , #ace ); /* Firefox 3.6+ */
background : -moz-linear-gradient( left , #ace , #f96 , #ace , #f96 , #ace );
/* Safari 4-5, Chrome 1-9 */
background : -webkit-gradient(linear, left top , right top , from( #ace ), color-stop( 0.25 , #f96 ), color-stop( 0.5 , #ace ), color-stop( 0.75 , #f96 ), to( #ace ));
/* Safari 5.1+, Chrome 10+ */
background : -webkit-linear-gradient( left , #ace , #f96 , #ace , #f96 , #ace );
/* Opera 11.10+ */
background : -o-linear-gradient( left , #ace , #f96 , #ace , #f96 , #ace );
/* Firefox 3.6+ */ : -moz-linear-gradient( left , #ace , #f96 5% , #ace , #f96 95% , #ace ); /* Safari 4-5, Chrome 1-9 */ background : -webkit-gradient(linear, left , right top , from( #ace ), color-stop( 0.05 , #f96 ), color-stop( 0.5 , #ace ), color-stop( 0.95 , #f96 ), to( #ace )); /* Safari 5.1+, Chrome 10+ */ background : -webkit-linear-gradient( left , #ace , #f96 5% , #ace , #f96 95% , #ace ); /* Opera 11.10+ */ background : -o-linear-gradient( left , #ace , #f96 5% , #ace , #f96 95% , #ace ); /* Firefox 3.6+ */ background : -moz-linear-gradient( left , #ace , #f96 5% , #ace , #f96 95% , #ace ); /* Safari 4-5, Chrome 1-9 */ background : -webkit-gradient(linear, left top , right top , from( #ace ), color-stop( 0.05 , #f96 ), color-stop( 0.5 , #ace ), color-stop( 0.95 , #f96 ), to( #ace )); /* Safari 5.1+, Chrome 10+ */ background : -webkit-linear-gradient( left , #ace , #f96< /code> 5% , #ace , #f96 95% , #ace ); /* Opera 11.10+ */ background : -o-linear-gradient( left , #ace , #f96 5% , #ace , #f96< /code> 95% , #ace ); /* Firefox 3.6+ */
background : -moz-linear-gradient( left , #ace , #f96 5% , #ace , #f96 95% , #ace );
/* Safari 4-5, Chrome 1-9 */
background : -webkit-gradient(linear, left top , right top , from( #ace ), color-stop( 0.05 , #f96 ), color-stop( 0.5 , #ace ), color-stop( 0.95 , #f96 ), to( #ace ));
/* Safari 5.1+, Chrom e 10+ */
background : -webkit-linear-gradient( left , #ace , #f96 5% , #ace , #f96 95% , #ace );
/* Opera 11.10+ */
background : -o-linear-gradient( left , #ace , #f96 5% , #ace , #f96 95% , #ace );
background : -moz-linear-gradient( left , #ace , #f96 ); background : -webkit-linear-gradient( left #ace , #f96 ); background : -o-linear-gradient( left , #ace , #f96 ); background : -moz-linear-gradient( left , #ace , #f96 ); bac kground : -webkit-linear-gradient( left , #ace , #f96 ); background : -o-linear-gradient( left , #ace , #f96 ); background : -moz-linear-gradient( left , #ace , #f96 );
background : -webkit-linear-gradient( left , #ace , #f96 );
background : -o-linear-gradient( left , #ace , #f96 );
background : -moz-linear-gradient( left 30 deg, #ace , #f96 ); background : -webkit-gradient(linear, 0 0 , 100% 100% , from( #ace ),to( #f96 )); background : -o-linear-gradient( 30 deg, #ace , #f96 ); background : -moz-linear-gradient( left 30 deg, #ace , #f96 );
background : -webkit-gradient(linear, 0 0 , 100% 100% , from( #ace ),to( #f96 )); background : -o-linear-gradient( 30 deg, #ace , #f96 ); background : -moz-linear-gradient( left 30 deg, #ace , #f96 );
background : -webkit-gradient(linear, 0 0 , 100% 100% , from( #ace ),to( #f96 ));
background : -o-linear-gradient( 30 deg, #ace , #f96 );
background : -moz-linear-gradient(, #ace , #f96 ); background : -webkit-gradient(,, from( #ace ), to( #f96 )); background : -webkit-linear-gradient(, #ace , #f96 ); background : -o-linear-gradient(, #ace , #f96 ); background : -moz-linear-gradient(, #ace , #f96 background : -webkit-gradient(,, from( #ace ), to( #f96 )); background : -webkit-linear-gradient(, #ace , #f96 ); background : -o-linear-gradient(, #ace , #f96 ); background : -moz-linear-gradient( #ace , #f96 );
background : -webkit-gradient( #ace ), to( #f96 ));
background : -webkit-linear-gradient( #ace , #f96 );
background : -o-linear-gradient( #ace , #f96 );
.deg 0 { background : -moz-linear-gradient( 0 deg, #ace , #f96 ); background : -webkit-gradient(linear, 0 50% , 100% 50% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 0 deg, #ace , #f96 ); background : -o-linear-gradient( 0 deg, #ace , #f96 );
} .deg 45 { background : -moz-linear-gradient( 45 deg, #ace , #f96 ); background : -webkit-gradient(linear, 0 100% , 100% 0% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 45 deg, #ace , #f96 ); background : -o-linear-gradient( 45 deg, #ace , #f96 ); } .deg 90 { background : -moz-linear-gradient( 90 deg, #ace , #f96 ); background : -webkit-gradient(linear, 50% 100% , 50% 0% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 90 deg, #ace , #f96 ); background : -o-linear-gradient( 90 deg, #ace , #f96 ); } .deg 135 { background : -moz-linear-gradient( 135 deg, #ace , #f96 ); background : -webkit-gradient(linear, 100% 100% , 0 0 ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 135 deg, #ace , #f96 ); background : -o-linear -gradient( 135 deg, #ace , #f96 ); } .deg 180 { background : -moz-linear-gradient( 180 deg, #ace , #f96 ); background : -webkit-gradient(linear, 100% 50% , 0 50% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 180 deg, #ace , #f96 ); background : -o-linear-gradient( 180 deg, #ace , #f96 ); } .deg 225 { background : -moz-linear-gradient( 225 deg, #ace , #f96 ); background : -webkit-gradient(linear, 100% 0% , 0 100% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 225 deg, #ace , #f96 ); background : -o-linear-gradient( 225 deg, #ace , #f96 ); } .deg 270 { background : -moz-linear-gradient( 270 deg, #ace , #f96 ); background : -webkit-gradient(linear, 50% 0% , 50% 100% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 270 deg, #ace , #f96 ); background : -o-linear-gradient( 270 deg, #ace , #f96 ); } .deg 315 { background : -moz-linear-gradient( 315 deg, #ace , #f96 ); background : -webkit-gradient(linear, 0% 0% , 100% 100% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 315 deg, #ace , #f96 ); background : -o-linear-gradient( 315 deg, #ace , #f96 ); } .deg 360 { background : -moz-linear-gradient( 360 deg, #ace , #f96 ); background : -webkit-gradient(linear, 0 50% , 100% 50% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 360 deg, #ace , #f96 ); background : -o-linear-gradient( 360 deg, #ace , #f96 ); } .deg 0 { background : -moz-linear-gradient( 0 deg, #ace , #f96 ); background : -webkit-gradient(linear, 0 50% , 100% 50% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 0 deg, #ace , #f96 ); background : -o-linear-gradient( 0 deg, #ace , #f96 ); } .deg 45 { background : -moz-linear-gradient( 45 deg, #ace , #f96 ); background : -webkit-gradient(linear, 0 100% , 100% 0% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 45 deg, #ace , #f96 ); background : -o-linear-gradient( 45 deg, #ace , #f96 ); } .deg 90 { background : -moz-linear-gradient( 90 deg, #ace , #f96 ); background : -webkit-gradient(linear, 50% 100% , 50% 0% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 90 deg, #ace , #f96 ); background : -o-linear-gradient( 90 deg, #ace , #f96 ); } .deg 135 { background : -moz-linear-gradient( 135 deg, #ace , #f96 ); background : -webkit-gradient(linear, 100% 100% , 0 0 ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 135 deg, #ace , #f96 ); background : -o-linear-gradient( 135 deg, #ace , #f96 ); } .deg 180 { background : -moz-linear-gradient( 180 deg, #ace , #f96 ); background : -webkit-gradient(linear, 100% 50% , 0 50% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 180 deg, #ace , #f96 ); background : -o-linear-gradient( 180 deg, #ace , #f96 ); } .deg 225 { background : -moz-linear-gradient( 225 deg, #ace , #f96 ); background : -webkit-gradient(linear, 100% 0% , 0 100% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( deg, #ace , #f96 ); background : -o-linear-gradient( 225 deg, #ace , #f96 ); } .deg 270 { background : -moz-linear-gradient( 270 deg, #ace , #f96 ); background : -webkit-gradient(linear, 50% 0% , 50% 100% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 270 deg, #ace , #f96 ); background : -o-linear-gradient( 270 deg, #ace , #f96 ); } .deg 315 { background : -moz-linear-gradient( 315 deg, #ace , #f96 ); background : -webkit-gradient(linear, 0% 0% , 100% 100% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 315 deg, #ace , #f96 ); background : -o-linear-gradient( 315 deg, #ace , #f96 ); } .deg 360 { background : -moz-linear-gradient( 360 deg, #ace , #f96 ); background : -webkit-gradient(linear, 0 50% , 100% 50% ,from( #ace ),to( #f96 )); background : -webkit-linear-gradient( 360 deg, #ace , #f96 ); background : -o-linear-gradient( 360 deg, #ace , #f96 ); } .deg 0 {
background : -moz-linear-gradient( 0 deg, #ace , #f96 );
background : -webkit-gradient(linear, 0 50% , 100% 50% ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 0 deg, #ace , #f96 );
background : -o-linear-gradient( 0 deg, #ace , #f96 );
}
.deg 45 {
background : -moz-linear-gradient( 45 deg, #ace , #f96 );
background : -webkit-gradient(linear, 0 100% , 100% 0% ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 45 deg, #ace , #f96 );
background : -o-linear-gradient( 45 deg, #ace , #f96 );
}
.deg 90 {
background : -moz-linear-gradient( 90 deg, #ace , #f96 );
background : -webkit-gradient(linear, 50% 100% , 50% 0% ,from( #ac e ),to( #f96 ));
background : -webkit-linear-gradient( 90 deg, #ace , #f96 );
background : -o-linear-gradient( 90 deg, #ace , #f96 );
}
.deg 135 {
background : -moz-linear-gradient( 135 deg, #ace , #f96 );
background : -webkit-gradient(linear, 100% 100% , 0 0 ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 135 #ace , #f96 );
background : -o-linear-gradient( 135 deg, #ace , #f96 );
}
.deg 180 {
background : -moz-linear-gradient( 180 deg, #ace , #f96 );
background : -webkit-gradient(linear, 100% 50% , 0 50% ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 180 deg, #ace , #f96 );
background : -o-linea r-gradient( 180 deg, #ace , #f96 );
}
.deg 225 {
background : -moz-linear-gradient( 225 deg, #ace , #f96 );
background : -webkit-gradient(linear, 100% 0% , 0 100% ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 225 deg, #ace , #f96 );
background : -o-linear-gradient( 225 deg, #ace , #f96 );
}
.deg 270 {
background : -moz-linear-gradient( 270 deg, #ace , #f96 );
background : -webkit-gradient(linear, 50% 0% , 50% 100% ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 270 deg, #ace , #f96 );
background : -o-linear-gradient( 270 deg, #ace , #f96 );
}
.deg 315 {
background : -moz-linear-gradient( 315 deg, #ace , #f96 );
background : -webkit-gradient(linear, 0% 0% , 100% 100% ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 315 deg, #ace , #f96 );
background : -o-linear-gradient( 315 deg, #ace , #f96 );
}
.deg 360 {
background : -moz-linear-gradient( 360 deg, #ace , #f96 );
background : -webkit-gradient(linear, 50% , 100% 50% ,from( #ace ),to( #f96 ));
background : -webkit-linear-gradient( 360 deg, #ace , #f96 );
background : -o-linear-gradient( 360 deg, #ace , #f96 );
}
background : -moz-linear-gradient( top , #ace , #f96 80% , #f96 ); background : -webkit-linear-gradient( top , #ace , #f96 80% , #f96 ); background : -o-linear-gradient( top , #ace , #f96 80% , #f96 ); background : -moz-linear-gradient( top , #ace , #f96 80% , #f96 ); background : -webkit-linear-gradient( top , #ace , #f96 80% , #f96 ); background : -o-linear-gradient( top , #ace , #f96 80% , #f96 background : -moz-linear-gradient( top , #ace , #f96 80% , #f96 );
background : -webkit-linear-gradient( top , #ace , #f96 80% , #f96 );
background : -o-linear-gradient( top , #ace , #f96 80% , #f96 );
background : -moz-linear-gradient( left , red , #f96 , yellow, green , #ace ); background : -webkit-linear-gradient( left , red , #f96 ,yellow, green , #ace ); background : -o-linear-gradient( left , red , #f96 , yellow, green , #ace ); : -moz-linear-gradient( left , red , #f96 , yellow, green , #ace ); background : -webkit-linear-gradient( left , red , #f96 ,yellow, green , #ace ); background : -o-linear-gradient( left , red , #f96 , yellow, green , #ace ); background : -moz-linear-gradient( left , red , #f96 , yellow, green , #ace );
backg round : -webkit-linear-gradient( left , red , #f96 ,yellow, green , #ace );
background : -o-linear-gradient( left , red , #f96 , yellow, green , #ace );
|
1
2
3
|
background : -moz-linear-gradient( right , rgba( 255 , 255 , 255 , 0 ), rgba( 255 , 255 , 255 , 1 )), url (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); background : -webkit-linear-gradient( right , rgba( 255 , 255 , 255 , 0 ), rgba( 255 , 255 , 255 , 1 )), url (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); background : -o-linear-gradient( right , rgba( 255 , 255 , 2 55 , 0 ), rgba( 255 , 255 , 255 , 1 )), url (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); |
|
1
2
3
|
background : -moz-linear-gradient( right , rgba( 255 , 255 , 255 , 0 ), rgba( 255 , 255 , 255 , 1 background : -webkit-linear-gradient( right , rgba( 255 , 255 , 255 , 0 ), rgba( 255 , 255 , 255 , 1 )), url (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); background : -o-linear-gradient( right , rgba( 255 , 255 , 255 , 0 ), rgba( 255 , 255 , 255 , 1 )), url (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); |
|
1
2
3
|
background : -moz-linear-gradient( right , rgba( 255 , 255 , 255 , 0 ), rgba( 255 , 255 , 255 , 1 )), url (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); background : -webkit-lin ear-gradient( right , rgba( 255 , 255 , 255 , 0 ), rgba( 255 , 255 , 255 , 1 )), url (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); background : -o-linear-gradient( right , rgba( 255 , 255 , 255 , 0 ), rgba( 255 , 255 , 255 , 1 )), url (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); |
1
2
3
background : -moz-linear-gradient( right , rgba( 255 , 255 , 255 , 0 ), rgba( 255 , 255 , 255 , 1 )), url (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg) ; background : -webkit-linear-gradient( right , rgba( 255 , 255 , 255 , 0 ), rgba( 255 , 255 , 255 , 1 )), url (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); background : -o-linear-gradient( right , rgba( 255 , 255 , 255 , 0 ), rgba( 255 , 255 , 255 , 1 )), url (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); background : -moz-linear-gra dient( right , rgba( 255 , 255 , 255 , 0 ), rgba( 255 , 255 , 255 , 1 )), url (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
background : -webkit-linear-gradient( right , rgba( 255 , 255 , 255 , 0 ), rgba( 255 , 255 , 255 , 1 )), url (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
background : -o-linear-gradient( right , rgba( 255 , 255 , 255 , 0 ), rgba( 255 , 255 , 255 , 1 )), url (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);