<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width: 200px; height: 200px; /* background-color: #bfa; */ /* 线性渐变 linear-gradient() linear-gradient() - 线性渐变的开头，我们可以指定一个渐变的方向 to left to right to bottom to top xxxdeg deg表示度数 - 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布 */ /* background-image: linear-gradient(red 50px,yellow 100px,green 150px, orange 200px); */ background-image: repeating-linear-gradient(red 50px,yellow 100px); width: 300px; height: 300px; /* border-radius: 150px; */ /* 径向渐变 radial-gradient() 默认情况下径向渐变的形状是根据元素的形状计算 正方形--->圆形 长方形--->椭圆形 也可以手动指定径向渐变的大小 radial-gradient(100px 100px,red,yellow) circl->圆形 ellipse->椭圆 也可以指定渐变的位置 radial-gradient(100px 100px at 0 0,red,#bfa) */ background-image: radial-gradient(100px 100px at 0 0,red,#bfa) } </style> </head> <body> <div class="box1"></div> </body> </html>