css徑向漸變radial-gradient
阿新 • • 發佈：2021-02-04
效果圖：
radial-gradient()函式建立了一個圖片，其由原點輻射開的在倆個或者多個點顏色之前的漸變組成
寫法：
background:radial-gradient(#ccc,#9198e5)
background:radial-gradient(closest，#ccc,#9198e5，#ff3040)
background:radial-gradient(circle at 100%,#ccc,#ccc 50%,#9198e5,75%,#ff3040 75%)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .box1 { float: left; width: 200px; height: 200px; margin: 20px; background: radial-gradient(red, #9198e5); } .box2 { float: left; width: 200px; height: 200px; margin: 20px; background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c); } .box3 { float: left; width: 200px; height: 200px; margin: 20px; background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333333 75%); } .box4 { float: left; width: 200px; height: 200px; margin: 20px; background: radial-gradient(50px 100px ellipse, transparent 40px, yellow 41px, red); } </style> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </body> </html>