| 123456789101112131415161718192021222324252627282930313233 |
- <!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>
- .box{
- width: 200px;
- height: 200px;
- /* background-color: red; */
- margin: 100px auto;
- /* 线性渐变色 linear-gradient */
- /* 语法：linear-gradient(角度,颜色1,颜色2,颜色3,....) */
- /* background-image: linear-gradient(red,blue,yellow,green); */
- /* 角度：0deg 从左到右渐变 */
- /* background-image: linear-gradient(45deg,red,blue); */
- /* top left right bottom */
- /* to left 从右到左渐变 to right 从左到右渐变 .... */
- /* background-image: linear-gradient(to top left,red,blue); */
- /* 径向渐变色 radial-gradient */
- /* 语法：radial-gradient(颜色1,颜色2,颜色3,....) */
- background-image: radial-gradient(red,blue);
- /* 径向渐变色默认从中心开始渐变 */
- }
- </style>
- </head>
- <body>
- <div class="box"></div>
- </body>
- </html>
|
