CSS渐变：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin: 0; padding: 0;} .o{overflow: hidden;} .div{width: 375px; height: 350px; float: left;} .div1{ background: linear-gradient(136deg, #286aff, #4e6ef2, #7274f9, #9f66ff); } .div2{ background: linear-gradient(to bottom right, #286aff, #4e6ef2, #7274f9, #9f66ff); } .div3{ background: linear-gradient(to right, #b7e9d1, #c1d8f2); }.div3{ background: linear-gradient(to right, #f4c6a6, #fff2e3) no-repeat,linear-gradient(to bottom, transparent, rgba(255,255,255)); background-blend-mode: overlay; }.div4{ background: linear-gradient(to right, #b7e9d1, #c1d8f2) no-repeat,linear-gradient(to bottom, transparent, rgba(255,255,255)); background-blend-mode: overlay;}.div5{ background: linear-gradient(to right, #b4e2e4, #a5d9de, #d0caf8) no-repeat,linear-gradient(to bottom, transparent 0%, rgba(255,255,255)); background-blend-mode: overlay;} </style> </head> <body> <div class="o"><div class="div div1"></div><div class="div div2"></div><div class="div div3"></div><div class="div div4"></div><div class="div div5"></div> </div> </body> </html>
打完收工！