Shulou(Shulou.com)06/03 Report--

This article mainly explains "css3 uses Gradients to achieve linear gradient", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "css3 uses Gradients to achieve linear gradient" bar!

Code block

Html page:

Linear gradient of css3 Gradients repetition A linear gradient that starts from the left. The starting point is completely transparent, slowly transition to completely opaque red with rainbow color and text linear gradient with multiple color nodes, linear gradient from top to bottom 45 angle linear gradient 90 angle linear gradient 180 angle linear gradient from the upper right corner (to the lower left corner) the linear gradient starts from the upper left corner (to the lower right corner) the linear gradient starts from the left. The starting point is # A52A2A, and slowly transition to a linear gradient of # 6495ED starting at the top. The starting point is red, and slowly transition to blue css style: div {width: 800pxposiheight: 600pxadding: 20pxTracterization50px.grad-red-blue {background:-webkit-linear-gradient (red,blue); background:-o-linear-gradient (red,blue); background:-moz-linear-gradient (red,blue); background:linear-gradient (red,blue);} .grad-A52A2A-6495ED {background:-webkit-linear-gradient (left,#A52A2A,#6495ED) Background:-o-linear-gradient (right,#A52A2A,#6495ED); background:-moz-linear-gradient (right,#A52A2A,#6495ED); background:linear-gradient (to right,#A52A2A,#6495ED);} .grad-008B8B-DEB887 {background:-webkit-linear-gradient (left top,#008B8B,#DEB887); background:-o-linear-gradient (bottom right,#008B8B,#DEB887); background:-moz-linear-gradient (bottom right,#008B8B,#DEB887) Background:linear-gradient (to bottom right,#008B8B,#DEB887);} .grad-FF69B4-2F4F4F {background:-webkit-linear-gradient (right top,#FF69B4,#2F4F4F); background:-o-linear-gradient (bottom left,#FF69B4,#2F4F4F); background:-moz-linear-gradient (bottom left,#FF69B4,#2F4F4F); background:linear-gradient (to bottom left,#FF69B4,#2F4F4F);} .grad-180-deg {background:-webkit-linear-gradient Background:-o-linear-gradient B8860B); background:-moz-linear-gradient B8860B); background:linear-gradient B8860B); .grad-90-deg {background:-webkit-linear-gradient (90degGe F0F8FFJ B8860B); background:-o-linear-gradient B8860B); background:-moz-linear-gradient B8860B); background:linear-gradient B8860B) } .grad-0-deg {background:-webkit-linear-gradient (0degmeng F0F8FFgramme 7FFFD4); background:-o-linear-gradient (0degregor F0F8FFFD4); background:-moz-linear-gradient (0F8FFD4); background:linear-gradient (7FFFD4); grad-45-deg {background:-webkit-linear-gradient (30degredder blue); background:-o-linear-gradient (30degregor redder blue) Background:-moz-linear-gradient (30degreginal red blue); background:linear-gradient (30degreginal redder blue);} .grad-red-green-blue {background:-webkit-linear-gradient (red,green,blue); background:-o-linear-gradient (red,green,blue); background:-moz-linear-gradient (red,green,blue); background:linear-gradient (red,green,blue) } .grad-r-o-y-g-b-i-v {background:-webkit-linear-gradient (left,red,orange,yellow,green,blue,indigo,violet); background:-o-linear-gradient (left,red,orange,yellow,green,blue,indigo,violet); background:-moz-linear-gradient (left,red,orange,yellow,green,blue,indigo,violet); background:linear-gradient (to right,red,orange,yellow,green,blue,indigo,violet) } .grad-rgba-0-1 {background:-webkit-linear-gradient (left,rgba), rgba); background:-o-linear-gradient (left,rgba), rgba); background:-moz-linear-gradient (left,rgba), rgba); background:linear-gradient (to right,rgba), rgba) } .grad-repeating-lg {/ * Safari 5.16.0 * / background:-webkit-repeating-linear-gradient (red, yellow 10%, green 20%); / * Opera 11.1-12.0% * / background:-o-repeating-linear-gradient (red, yellow 10%, green 20%); / * Firefox 3.6-15 * / background:-moz-repeating-linear-gradient (red, yellow 10%, green 20%) / * Standard syntax * / background: repeating-linear-gradient (red, yellow 10%, green 20%)} Thank you for reading. The above is the content of "css3 uses Gradients to achieve linear gradient". After the study of this article, I believe you have a deeper understanding of the problem of css3 using Gradients to achieve linear gradient, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.