CSS3 实现厉害的文字和输入框组合效果最近在忙着弄网站，学到了不少效果，这又是一个厉害的
Html代码<html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/><title>发送微博页面</title><style>html{padding:0px;margin:0px;}body{padding:0px;margin:0px;text-align:center;}/**弹出层背景**/.pop-bg{filter:alpha(opacity=10);-moz-opacity:0.1;-khtml-opacity:0.1;opacity:0.1;border-radius:15px;box-shadow:01px1pxrgba(255,255,255,0.8)inset,1px1px3pxrgba(0,0,0,0.2),0004pxrgba(188,188,188,0.5);}.pop-body{padding:10px;}.pop-body-title{float:left;border-radius:10px;width:100%;border:1pxsolid#4096ee;}.title-text{float:left;color:black;font-size:22px;padding-left:10px;}.title-close{float:right;cursor:pointer;padding-right:15px;padding-top:3px;}.title-closea{text-decoration:none;color:black;font-weight:bold;padding-left:5px;padding-right:5px;}.title-closea:hover{text-decoration:none;color:red;display:inline-block;background:#c0d3e7;border-radius:5px;padding-left:5px;padding-right:5px;}/**内容部份**/.pop-body-context{border-radius:10px;width:100%;border:1pxsolid#4096ee;float:left;margin-top:15px;}.pop-body-c-title{float:left;}.a-btn{-moz-border-bottom-colors:none;-moz-border-image:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;-moz-transition:all0.3slinear0s;background:-moz-linear-gradient(centertop,#FEDA710%,#FEBB4A100%)repeatscroll00transparent;border-color:#F5B74E#E5A73E#D6982F;border-radius:4px4px4px4px;border-style:solid;border-width:1px;box-shadow:01px1px#D3D3D3,01px0#FEE395inset;display:inline-block;float:left;height:34px;margin:10px;margin-right:3px;margin-left:4px;overflow:hidden;padding:5px130px00px;position:relative;text-decoration:none;}.a-btn-text{padding-top:5px;display:block;font-size:14px;white-space:nowrap;color:#996633;text-shadow:01px0#fedd9b;-webkit-transition:all0.3slinear;-moz-transition:all0.3slinear;-o-transition:all0.3slinear;transition:all0.3slinear;font-weight:bold;}.a-btn-slide-text{position:absolute;top:35px;left:0px;width:auto;height:0px;background:#fff;color:#996633;font-size:13px;white-space:nowrap;font-family:Georgia,serif;font-style:italic;overflow:hidden;line-height:40px;-webkit-box-shadow:-1px0px1pxrgba(255,255,255,0.4),1px1px1pxrgba(0,0,0,0.5)inset;-moz-box-shadow:-1px0px1pxrgba(255,255,255,0.4),1px1px1pxrgba(0,0,0,0.5)inset;box-shadow:-1px0px1pxrgba(255,255,255,0.4),1px1px1pxrgba(0,0,0,0.5)inset;-webkit-transition:height0.3slinear;-moz-transition:height0.3slinear;-o-transition:height0.3slinear;transition:height0.3slinear;}.a-btn-icon-right{position:absolute;right:0px;top:0px;height:41px;width:130px;border-left:1pxsolid#f5b74e;-webkit-box-shadow:1px0px1pxrgba(255,255,255,0.4)inset;-moz-box-shadow:1px0px1pxrgba(255,255,255,0.4)inset;box-shadow:1px0px1pxrgba(255,255,255,0.4)inset;}.a-btn:hover{height:65px;-webkit-box-shadow:0px1px1pxrgba(255,255,255,0.8)inset,1px1px5pxrgba(0,0,0,0.4);-moz-box-shadow:0px1px1pxrgba(255,255,255,0.8)inset,1px1px5pxrgba(0,0,0,0.4);box-shadow:0px1px1pxrgba(255,255,255,0.8)inset,1px1px5pxrgba(0,0,0,0.4);}.a-btn:hover.a-btn-text{text-shadow:1px1px1pxrgba(0,0,0,0.2);color:#fff;}.a-btn:hover.a-btn-slide-text{height:40px;}.a-btn-slide-textinput{float:left;margin-top:4px;margin-left:2px;}.pop-body-c-text{padding-left:3px;}.pop-body-c-textarea{width:780px;height:100px;}.pop-body-row-u{padding-top:5px;padding-left:10px;}.a-t-i-r-t{font-size:14px;height:20px;overflow:hidden;padding-top:8px;text-align:center;}.pop-body-images-l{padding:10px;}.pop-body-ims-panel{padding:10px;}.pop-b-i-i-img{border-radius:8px;float:left;position:relative;left:-20px;}.pop-b-i-i-unit{float:left;}.pop-b-i-i-unitinput{float:left;position:relative;z-index:99;}</style></head><body><br/><divstyle="float:left;width:820px;height:200px;position:relative;left:100px;"><divclass="pop-bg"style="float:left;position:relative;width:820px;height:200px;"></div><divclass="pop-body"style="float:left;text-align:left;position:relative;top:-200px;width:98%;"><!--头部--><divclass="pop-body-title"><divclass="title-text">标题</div><divclass="title-close"><ahref="#">关闭</a></div></div><!--内容部分--><divclass="pop-body-context"><divclass="pop-body-c-title"><aclass="a-btn"href="#"><spanclass="a-btn-text">栏目名称</span><spanclass="a-btn-icon-right"><divclass="a-t-i-r-t">请输入</div></span><spanclass="a-btn-slide-text"><inputsize="24"/></span></a><aclass="a-btn"href="#"><spanclass="a-btn-text">中文名称</span><spanclass="a-btn-icon-right"><divclass="a-t-i-r-t">请输入</div></span><spanclass="a-btn-slide-text"><inputsize="24"/></span></a><aclass="a-btn"href="#"><spanclass="a-btn-text">英文名称</span><spanclass="a-btn-icon-right"><divclass="a-t-i-r-t">请输入</div></span><spanclass="a-btn-slide-text"><inputsize="24"/></span></a><aclass="a-btn"href="#"><spanclass="a-btn-text">适配类型</span><spanclass="a-btn-icon-right"><divclass="a-t-i-r-t">请输入</div></span><spanclass="a-btn-slide-text"><inputsize="24"/></span></a></div></div></div></body></html>