模仿bootstrap实现边框效果

来源：互联网发布：网络渗透基础编辑：程序博客网时间：2024/06/01 09:33
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>placeholder Demo</title></head><body><style>     input[type=text], input[type=password] {        border-color: #bbb;        height: 38px;        font-size: 14px;        border-radius: 2px;        outline: 0;        border: #ccc 1px solid;        padding: 0 10px;        width: 250px;        -webkit-transition: box-shadow .5s;        margin-bottom: 15px;    }        input[type=text]:hover,  input[type=text]:focus, input[type=password]:hover,  input[type=password]:focus {            border: 1px solid #56b4ef;            box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6);            -webkit-transition: box-shadow .5s;        }    input::-webkit-input-placeholder {        color: #999;        -webkit-transition: color .5s;    }    input:focus::-webkit-input-placeholder,  input:hover::-webkit-input-placeholder {        color: #c2c2c2;        -webkit-transition: color .5s;    }</style><input type="text" placeholder="用户名或邮件地址" name="username" /><input type="password" placeholder="密码" name="password" /></body></html>
0 0