css3 渐变
<!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> html, body { height: 100%; } body { margin: 0; padding: 0; background-color: #f8fcd4; /*制作背景渐变效果*/ /* background-image: linear-gradient( to bottom, #f8fcd4 20%, #dbfacb 100% );*/ } .nav { width: 800px; text-align: center; padding-top: 50px; margin: 0 auto; } /*设置按钮基本样式*/ .nav a { display: inline-block; width: 100px; height: 30px; text-align: center; line-height: 30px; font-size: 14px; color: #fff; text-decoration: none; border: 1px solid #e59500; background-color: #FFB700; background-image: linear-gradient( to bottom, #FFB700 0%, #FF8C00 100% ); } /*制作橙色按钮悬停效果*/ .nav a:hover{ background-color: #FFCB48; background: linear-gradient( to bottom, #FFCB48 0%, green 100% ); } </style> </head> <body> <div class="nav"> <a href="#;">refresh</a> <a href="#">shuffle</a> <a href="#">preview</a> <a href="#">tea</a> <a href="#">wifi</a> <a href="#">locator</a> </div> </body> </html>鼠标悬停上面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS 渐变</title> <style> body { margin: 0; padding: 0; background-color: #F7F7F7; } .progress { width: 400px; height: 40px; margin: 100px auto; border-radius: 5px; background-color: green; background-image: linear-gradient( 135deg, yellow 25%, transparent 25%, transparent 50%, yellow 50%, yellow 75%, transparent 75%, transparent 100% ); background-size: 40px 40px; } </style> </head> <body> <div class="progress"></div> </body> </html>运行结果如下
