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>

 4.渐变按钮和旋转菜单_第1张图片

DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test5title>
    <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">html5div>
    <div class="div2">css3div>
    <div class="div3">javascriptdiv>
    <div class="div4">jQuerydiv>
    <hr>
    <div class="div5">html5div>
    <div class="div6">css3div>
    <div class="div7">javascriptdiv>
    <div class="div8">jQuerydiv>
body>
html>

 

你可能感兴趣的:(4.渐变按钮和旋转菜单)