| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>线性渐变</title>
- <style>
- .box1{
- width: 200px;
- height: 200px;
- /* background-color: #bfa; */
- margin: 200px auto;
- /*
- 通过渐变，可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果
- 渐变是图片，需要通过background-image来设置
-
- 线性渐变：颜色沿着一条直线发生变化
- linear-gradient()
- linear-gradient(red,yellow)：表示红色在开头，黄色在结尾，中间是过渡区域
- -线性渐变的开头，我们可以指定一个渐变的方向
- to left
- to right
- to bottom
- to top
- xxxdeg deg表示度数
- turn 表示圈
- -渐变可以同时指定多个颜色，多个颜色默认情况下平均分布
- 也可以手动指定渐变的分布情况
- repeating-linear-gradient()：可以平铺的线性渐变
- */
- /* background-image: linear-gradient(red,yellow); */
- /* background-image: linear-gradient(to right,red,yellow); */
- /* background-image: linear-gradient(180deg,red,yellow); */
- /* background-image: linear-gradient(to top left,red,yellow); */
- /* background-image: linear-gradient(.25turn,red,yellow); */
- /* background-image: linear-gradient(to right,red,yellow,#bfa,orange); */
- /* background-image: linear-gradient(red 50px,yellow 70px); */
- background-image: repeating-linear-gradient(red 50px,yellow 100px);
- /* 上面一行代码的效果等同于下面的这条 */
- background-image: repeating-linear-gradient(red 0px,yellow 50px);
-
- }
- </style>
- </head>
- <body>
- <div class="box1"></div>
- </body>
- </html>
|
