webkit-gradient-approx-radial-1-ref.html (2466B)
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>CSS Reference</title> 9 <style> 10 div { 11 border: 1px solid black; 12 width: 50px; 13 height: 40px; 14 margin: 1px; 15 float: left; 16 } 17 br { clear: both; } 18 </style> 19 </head> 20 <body> 21 <!-- Note: -webkit-gradient(radial, ...) expressions involve *two* circles, 22 with the gradient progressing between their edges. But, the standard 23 syntax (& hence our emulation) only supports *one* circle. 24 25 So, in our reference renderings below, we ignore the smaller circle from 26 the testcase's gradient expression, and we use a gradient that progresses 27 from the outer circle's center to its edge. (Conceptually, we collapse 28 the smaller circle to a point at the center of the larger circle.) --> 29 30 <!-- Inner circle has nonzero radius, in testcase: 31 (We ignore it here.) --> 32 <div style="background: radial-gradient(circle 40px at left top, 33 blue, yellow)"></div> 34 <div style="background: radial-gradient(circle 50px at center center, 35 yellow, blue)"></div> 36 <br> 37 38 <!-- Both circles have the same radius, in testcase: 39 (We pretend the first one is 0-sized.) --> 40 <div style="background: radial-gradient(circle 40px at center center, 41 blue, yellow)"></div> 42 <div style="background: radial-gradient(circle 10px at 10px 10px, 43 blue, yellow)"></div> 44 <br> 45 46 <!-- Inner circle has different center than outer circle, in testcase: 47 (We collapse it to center of outer circle.) --> 48 <div style="background: radial-gradient(circle 40px at left top, 49 blue, yellow)"></div> 50 <div style="background: radial-gradient(circle 40px at 10px 20px, 51 yellow, blue)"></div> 52 <br> 53 54 <!-- Inner circle and outer circle do not even intersect, in testcase: 55 (We collapse smaller circle to center of larger circle.) --> 56 <div style="background: radial-gradient(circle 10px at 30px 10px, 57 blue, yellow)"></div> 58 <div style="background: radial-gradient(circle 30px at 150px 10px, 59 blue, yellow)"></div> 60 61 </body> 62 </html>