Հեղինակ
Վիդեոկուրսեր
Առաջարկել
Խորհուրդ եմ տալիս
Կոդ
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Էջի վերնագիր</title> <style> #gradient { height: 150px; width: 150px; background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari */ background: radial-gradient(red 5%, green 15%, blue 60%); } #grad1 { height: 150px; width: 150px; background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Safari */ background: radial-gradient(closest-side at 60% 55%,blue,green,yellow,black); } #grad2 { height: 150px; width: 150px; background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari */ background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black); } #grad3 { height: 150px; width: 150px; background: -webkit-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Safari */ background: radial-gradient(closest-corner at 60% 55%,blue,green,yellow,black); } #grad4 { height: 150px; width: 150px; background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari */ background: radial-gradient(farthest-corner at 60% 55%,blue,green,yellow,black); } </style> </head> <body> <h3>Radial Gradient - Evenly Spaced Color Stops</h3> <div id="gradient"></div> <h3>Radial Gradients - Use of different size keywords</h3> <p>closest-side:</p> <div id="grad1"></div> <p>farthest-side:</p> <div id="grad2"></div> <p>closest-corner:</p> <div id="grad3"></div> <p>farthest-corner (this is default):</p> <div id="grad4"></div> </body> </html>
Արդյունք