制作3D搜索框

来源：互联网发布：大数据产品经理编辑：程序博客网时间：2024/05/16 10:42
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
        <link href="D:\myweb\css\3-19-3.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <from id="formWrapper">
        <div class="formFiled clearfix">
        <input type="text" required="" placeholder="Search" class="search"/>
        <input type="submit" class="btn submit" value="GO"/></div>
    </from>
</body>
</html>
css文件：
#formWrapper{
    float: left;
    width: 445px;
    padding: 8px;
    margin: 20px;
    overflow: hidden;
    border-width: 1px;
    border-style: solid;
    border-color: #dedede #bababa #aaa #bababa;
    box-shadow: 0 3px 3px rgba(255,255,255,.1),
                0 3px 0 #bbb,0 4px 0 #aaa,
                0 5px 5px #444;
    border-radius: 10px;
    background-color: #f6f6f6;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#f6f6f6) to(#eae8e8));
    background-image: -webkit-linear-gradient(top,#f6f6f6,#eae8e8);
    background-image: -moz-linear-gradient(top,#f6f6f6,#eae8e8);
    background-image: -ms-linear-gradient(top,#f6f6f6,#eae8e8);
    background-image: -o-linear-gradient(top,#f6f6f6,#eae8e8);
    background-image: linear-gradient(top,#f6f6f6,#eae8e8);
    
}
#formWrapper .search{
    width: 330px;
    height: 20px;
    padding: 10px 5px;
    float: left;
    font: bold 16px 'lucida sans','trebuchet MS';
    border: 1px solid #ccc;
    box-shadow:0 1px 1px #ddd inset,0 1px 0 #fff;
    border-radius: 3px;
}
#formWrapper .btn{
   float: right;
    border: 1px solid #00748f;
    height: 42px;
    width: 100px;
    padding: 0;
    cursor: pointer;
    font: bold 15px Arial,Helvetica;
    color: #fafafa;
    text-transform: uppercase;
    background-color: #0483a0;
     background-image: -webkit-gradient(linear,left top,left bottom,from(#31b2c3) to(#0483a0));
    background-image: -webkit-linear-gradient(top,#31b2c3,#0483a0);
    background-image: -moz-linear-gradient(top,#31b2c3,#0483a0);
    background-image: -ms-linear-gradient(top,#31b2c3,#0483a0);
    background-image: -o-linear-gradient(top,#31b2c3,#0483a0);
    background-image: linear-gradient(top,#31b2c3#0483a0);
    text-shadow: 0 1px 0 rgba(0,0,0,.3);
    box-shadow: 0 1px 0 rgba(255,255,255,.3) inset,0 1px 0 #fff;
}
#formWrapper .search:focus{
    outline: 0;
    border-color: #aaa;
    box-shadow: 0 1px 1px #bbb inset;
}
#formWrapper .btn:hover,
#formWrapper .btn:focus{
    background: #0483a0;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#0483a0) to(#31b2c3));
    background-image: -webkit-linear-gradient(top,#0483a0,#31b2c3);
    background-image: -moz-linear-gradient(top,#0483a0,#31b2c3);
    background-image: -ms-linear-gradient(top,#0483a0,#31b2c3);
    background-image: -o-linear-gradient(top,#0483a0,#31b2c3);
    background-image: linear-gradient(top,#0483a0,#31b2c3);
}
#formWrapper .btn:active{
    outline: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.5) inset;
}
#formWrapper::-moz-focus-inner{
    border: 0;
}

效果图：
0 0