css布局实现三维立体登录表单输入框效果代码-html代码-BFW代码库

css布局实现三维立体登录表单输入框效果代码

代码语言：html

代码描述：使用css布局实现一个带图标的三维立体登录表单输入框效果代码。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <style type="text/css">
        body{
        background-color:#f7f0da;
        background-image: -webkit-linear-gradient(180deg,transparent 90%,#eae4cf 10%);
        background-image: -moz-linear-gradient(180deg,transparent 90%,#eae4cf 10%);
        background-image: -o-linear-gradient(180deg,transparent 90%,#eae4cf 10%);
        background-image: -ms-linear-gradient(180deg,transparent 90%,#eae4cf 10%);
        background-image: linear-gradient(180deg,transparent 90%,#eae4cf 10%);
        background-size: 5px 50px;
        }
        .box{ 
        margin:20px auto; 
        width:560px;
        text-align:center;
        font-weight:bold;
        }
        .box div:first-child{ 
        font-size:60px;
        margin-bottom:20px;
        text-shadow:0 2px 0 #c0c0c0,0 3px #979385;
        }
        .box .input_control{	
        position:relative;
        height:100px;
        }
        .box input{ 
        position:relative;
        font-size:18px;
        height:56px;
        width:100%;
        padding-left:10px;
        border:12px solid #fff;
        border-radius:3px;
        box-shadow:inset 0 0 0 1px #c0c0c0,inset 1px 2px 0 #e6e6e6,1px 2px 0 #c0c0c0,-1px 2px 0 #c0c0c0,2px 3px 0 #c0c0c0,-2px 3px 0 #c0c0c0,2px 12px 0 #c0c0c0,-2px 12px 0 #c0c0c0,0 2px 0 3px #979797,0 10px 0 3px #979797,-2px 15px 10px rgba(0,0,0,.6);
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        -o-box-sizing:border-box;
        -ms-box-sizing:border-box;
        box-sizing:border-box;
        -w.........完整代码请登录后点击上方下载按钮下载查看