渐变 · 前端

``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .line { height: 300px; /* width: 300px; */ /* 实现线性渐变 */ background-image: linear-gradient( /* to right, */ 135deg, /* to right, */ red 20%, blue 20%, blue 40%, red 40%, red 60%, blue 60%, blue 80%, red 80% ); background-size: 200px 300px; } </style> </head> <body> <div class="line"></div> </body> </html> ``` ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box { width: 300px; height: 300px; border: 1px solid red; margin: 50px auto; /* 径向渐变 */ background-image: radial-gradient( 100px at center, red, blue ); } </style> </head> <body> <div class="box"></div> </body> </html> ```