webkit-gradient-radial-2.html (2541B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <title> 9 CSS Test: -webkit-gradient(radial, ...) expressions 10 with various numeric positions and/or side keywords. 11 </title> 12 <style> 13 div { 14 border: 1px solid black; 15 width: 50px; 16 height: 40px; 17 margin: 1px; 18 float: left; 19 20 /* We include a fallback background, to easily distinguish failures at 21 * parse time (which fall back to this value) vs. something later on. */ 22 background: red; 23 } 24 br { clear: both; } 25 </style> 26 </head> 27 <body> 28 <!-- Placing gradient's center outside of the element: --> 29 <div style="background: -webkit-gradient(radial, 30 -10 -20, 0, -10 -20, 50, 31 from(blue), to(yellow))"></div> 32 <div style="background: -webkit-gradient(radial, 33 15 -2, 0, 15 -2, 50, 34 from(blue), to(yellow))"></div> 35 <div style="background: -webkit-gradient(radial, 36 -10 55, 0, -10 55, 50, 37 from(blue), to(yellow))"></div> 38 <br> 39 40 <!-- Mixing side keywords with numeric values: --> 41 <div style="background: -webkit-gradient(radial, 42 left 5, 0, left 5, 50, 43 from(blue), to(yellow))"></div> 44 <div style="background: -webkit-gradient(radial, 45 center 10, 0, center 10, 50, 46 from(blue), to(yellow))"></div> 47 <div style="background: -webkit-gradient(radial, 48 right 30, 0, right 30, 50, 49 from(blue), to(yellow))"></div> 50 <br> 51 52 <div style="background: -webkit-gradient(radial, 53 5 top, 0, 5 top, 50, 54 from(blue), to(yellow))"></div> 55 <div style="background: -webkit-gradient(radial, 56 10 center, 0, 10 center, 50, 57 from(blue), to(yellow))"></div> 58 <div style="background: -webkit-gradient(radial, 59 30 bottom, 0, 30 bottom, 50, 60 from(blue), to(yellow))"></div> 61 </body> 62 </html>