h5 input 阴影_html5中input表单加边框,阴影效果

CSS:

input

:

focus

{

border-color

:

#00CC99

;}

获取焦点时改变颜色

focus

能同时改变宽度

长度

背景色

……

.

form,p

(

margin-bottom:30px; margin-left:20px;

)

.shadow,.one,.two,.three,.four,.five,.six

(

height:50px;

width:280px;

border:1px solid #CCC;

)

.shadow

(

-moz-box-shadow: inset 0 0 10px #CCC;

-webkit-box-shadow: inset 0 0 10px #CCC;

box-shadow: inset 0 0 10px #CCC;

)

.one

(

-moz-box-shadow:5px 5px;

-webkit-box-shadow:5px 5px;

box-shadow:5px 5px;

)

.two

(

-moz-box-shadow:2px 2px 10px #06c;

-webkit-box-shadow:2px 2px 10px #06c;

box-shadow:2px 2px 10px #06c;

)

.three

(

-moz-box-shadow:0 0 10px #06c;

-webkit-box-shadow:0 0 10px #06c;

box-shadow:0 0 10px #06c;

)

.four

(

-moz-box-shadow:0 0 10px 10px #06c;

-webkit-box-shadow:0 0 10px 10px #06c;

box-shadow:00 10px 10px #06c;

)

.five

(

-moz-box-shadow:inset 5px 5px 10px #06c;

-webkit-box-shadow: inset 5px 5px 10px #06c;