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:1pxsolid#CCC;).shadow(-moz-box-shadow:inset0010px#CCC;-webkit-box-shadow:inset0010px#CCC;box-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#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:0010pxred,2px2px10px10pxyellow,4px4px12px12pxgreen;-webkit-box-shadow:0010pxred,2px2px10px10pxyellow,4px4px12px12pxgreen;box-shadow:0010pxred,2px2px10px10pxyellow,4px4px12px12pxgreen;)HTML:(form)输入框内阴影(inputclass=shadowtype=textname=name/)(/form)(pclass=one)简单效果:(/p)(pclass=two)虚阴影效果:(/p)(pclass=three)渐变阴影效果:(/p)(pclass=four)带光晕效果:(/p)(pclass=five)内阴影效果:(/p)(pclass=six)彩色阴影:(/p)示例效果:

1 / 3
下载文档,编辑使用

©2015-2020 m.777doc.com 三七文档.

备案号:鲁ICP备2024069028号-1 客服联系 QQ:2149211541

×
保存成功