<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景渐变</title> <style type="text/css"> input{ width: 90px; height: 40px; margin: 5px; font-size: 16px; text-shadow:RGBA 2px 3px 2px (0,0,0,0.8) ; / * Font shadow * / } .button1 { background : Linear-gradient (to right, 10% Orange, Red 100%) ; / * gradient background * / border- width : 0 ; / * remove border * / } .button2 { background : Linear-gradient (to left, Orange 10%, 100% Red) ; border-width : 0 ; } .button3 { border-RADIUS : 20px;/*圆角*/ } </style> </head> <body> <input type="button" name="" value="渐变按钮" class="button1"> <input type="button" name="" value="渐变按钮" class="button2"> <input type="button" name="" value="渐变按钮"reduce code redundancy<-!>= "Button2 Button3"class--> </body> </html>