| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| <style type="text/css"> | |
| div{width: 100px; | |
| height: 100px; | |
| border: 1px solid; | |
| margin: 10px; | |
| float: left;} | |
| div:nth-of-type(1){width: 200px; | |
| height: 100px; | |
| background-image: linear-gradient( rgb(0,125,0) , rgb(0,65,0) ); | |
| line-height:100px; | |
| text-align: center;} | |
| div:nth-of-type(2){border-radius: 50%; | |
| background-image: radial-gradient(at 10px 10px, rgb(0,0,250),rgb(0,0,100));} | |
| div:nth-of-type(3){width: 200px; | |
| height: 100px; | |
| background-image:repeating-linear-gradient(to top left, yellow ,yellow 20px,green 20px, green 40px);} | |
| </style> | |
| </head> | |
| <body> | |
| <div>保存</div> | |
| <div></div> | |
| <div></div> | |
| </body> | |
| </html> |
css实现线性渐变
猜你喜欢
转载自blog.csdn.net/weixin_42413689/article/details/80848669
今日推荐
周排行