注册登录

4.渐变按钮 

<!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>
知识兔
计算机