html5中input表单加边框,阴影效果.doc

《html5中input表单加边框,阴影效果.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、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:1pxsolid#CCC;）.shadow（ -moz-box-shadow:inset0010px#CCC; -webkit-box-shadow:inset0010px#CCC; b

2、ox-shadow:inset0010px#CCC;）.one（ -moz-box-shadow:5px5px;    -webkit-box-shadow:5px5px;    box-shadow:5px5px;）.two（ -moz-box-shadow:2px2px10px#06c;    -webkit-box-shadow:2px2px10px#06c;    box-shadow:2px2px10px#06c;）.three（ -moz-box-shadow:0010px#06c;    -webkit-box-shadow:0010px#

3、06c;    box-shadow:0010px#06c;）.four（ -moz-box-shadow:0010px10px#06c;   -webkit-box-shadow:0010px10px#06c;   box-shadow:0010px10px#06c;）.five（ -moz-box-shadow:inset5px5px10px#06c;   -webkit-box-shadow:inset5px5px10px#06c;   box-shadow:inset5px5px10px#06c;）.six（ -moz-box-shadow:00

4、10pxred,                                  2px2px10px10pxyellow,                                  4px4px12px12pxgreen;   -webkit-box-shadow:0010pxred,                                  2px2px10px10pxyellow,                                  4px4px12px12pxgreen;   box-shadow:0010pxre

5、d,                                  2px2px10px10pxyellow,                                  4px4px12px12pxgreen;）HTML:（form） 输入框内阴影（inputclass="shadow"type="text"name="name"/）（/form）（pclass="one"）简单效果:（/p）（pclass="two"）虚阴影效果:（/p）（pclass="three"）渐变阴影效果:（/p）（pclass="four"）带光晕效果:（/p）

6、（pclass="five"）内阴影效果:（/p）（pclass="six"）彩色阴影:（/p） 示例效果：