<!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: 2px 2px 3px rgba(0,0,0,0.8);/*字体阴影*/ } .button1{ background: linear-gradient(to right,orange 10%,red 100%);/*渐变背景*/ border-width: 0;/*去掉边框*/ } .button2{ background: linear-gradient(to left,orange 10%,red 100%); 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="渐变按钮" class="button2 button3"><!-- 减少代码冗余 --> </body> </html>
原文：https://www.cnblogs.com/chenJieLing/p/11694403.html