box-shadow写3d搜索栏

来源：互联网发布：英语图表数据作文模板编辑：程序博客网时间：2024/06/15 07:02
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><title>shadow</title><style type="text/css">.cl:after{content:"";height: 0;overflow: hidden;clear: both;visibility: hidden;}*{padding: 0;margin: 0;}.a{width: 1352px;height: 130px;border:3px solid #aaaaaa;margin:auto;padding: 24px;margin-top:100px;background: #ebe9ea;border-radius:28px;box-shadow: 0 9px #c1c1c1,0 12px #acacac,0px 20px 20px 0px #828282;-webkit-box-shadow: 0 9px #c1c1c1,0 12px #acacac,0px 20px 20px 0px #828282;-moz-webkit-box-shadow: 0 9px #c1c1c1,0 12px #acacac,0px 20px 20px 0px #828282;-ms-webkit-box-shadow: 0 9px #c1c1c1,0 12px #acacac,0px 20px 20px 0px #828282;-o-webkit-box-shadow: 0 9px #c1c1c1,0 12px #acacac,0px 20px 20px 0px #828282;}input{cursor:pointer;outline: none;}input[type="text"]{width: 1020px;height: 120px;float: left;border:3px solid #cccccc;font-size: 37px;color:#a9a9a9;text-indent:17px;border-radius:8px;box-shadow: 0 3px #fff,inset 0 2px 10px #cccccc;-moz-webkit-box-shadow: 0 3px #fff,inset 0 2px 10px #cccccc;-ms-webkit-box-shadow: 0 3px #fff,inset 0 2px 10px #cccccc;-o-webkit-box-shadow: 0 3px #fff,inset 0 2px 10px #cccccc;webkit-box-shadow: 0 3px #fff,inset 0 2px 10px #cccccc;}input[type="submit"]{width: 296px;height: 126px;float: right;border:3px solid #01748f;font-size:37px;color:white;background: #25a6bb;border-radius:8px;box-shadow: inset 0 3px 0 #6ec8d3;text-shadow:0 3px 0 #0e6b7a;-moz-webkit-box-shadow: 0 3px 0 #0e6b7a;-ms-webkit-box-shadow: 0 3px 0 #0e6b7a;-o-webkit-box-shadow: 0 3px 0 #0e6b7a;webkit-box-shadow: 0 3px 0 #0e6b7a;}</style></head><body><div class="a cl"><input type="text" placeholder="HTML5,HTML5,HTML5..."><input type="submit" value="GO"></div></body></html>
阅读全文
0 0