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>

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test5</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 30px;
            border-radius: 5px;/*圆角*/
            text-align: center;/*文字水平居中*/
            line-height: 30px;/*文字垂直居中*/
            margin: 30px;
            color: blue;
        }
        .div1{
            float: left;
            background: linear-gradient(to right,yellow 10%,red 100%);/*渐变背景*/
        }
        .div2,.div3,.div4{
            float: left;
            background: linear-gradient(to left,yellow 10%,red 100%);
        }
        hr{
            clear: left;
            border-style: dotted;/*虚线*/
            border-width: 3px;
            border-color: blue;
        }
        .div5,.div6,.div7,.div8{
            clear: left;
            background: linear-gradient(to left,yellow 10%,red 100%);
        }
        div:hover{
            transform: rotate(15deg);/*旋转角度*/
            transform-origin: 0 0;/*旋转起始位置*/
        }
    </style>
</head>
<body>
    <div class="div1">html5</div>
    <div class="div2">css3</div>
    <div class="div3">javascript</div>
    <div class="div4">jQuery</div>
    <hr>
    <div class="div5">html5</div>
    <div class="div6">css3</div>
    <div class="div7">javascript</div>
    <div class="div8">jQuery</div>
</body>
</html>

 

posted @ 2019-10-17 19:50  cjl2019  阅读(150)  评论(0)  编辑  收藏  举报