无论是网站还是web应用，都会为了增强用户体验而添加它，那么你是不是也想过设计一个别致的搜索框？在今天的文章中，大家将会学到如何使用伪元素来创建一个超酷的CSS3搜索框。当然在开始介绍前你也可以下载源代码或者查看在线演示。HTML举例：正如接下来你所看到的，标记很少，并且很容易理解：form class=“cf form-wrapper”input type=“text” placeholder=“Search here.。.” requiredbutton type=“submit”Search/button/form你可能注意到了HTML5的特殊属性，像placeholder和required，简介如下：.placeholder－基本上，这个属性的作用在于当文本框获得焦点之前，先在文本框里显示一个域的信息，直到获得焦点后，域的信息被隐藏。.required－这个属性说明了当前元素是表单提交中的一个必需属性。HTML5也给我们带来了一个新的type属性：type＝"search"。小贴士：HTML 元素像img 和input 都没有内容，所以，像before这样的伪元素不会为我们的搜索框呈现任何箭头。我的解决方案是使用button type＝“submit” 元素代替普通的input type=“submit”。这样，我们就可以用ENTER键来提交表单。CSS举例接下来，你将会看到demo里必要的样式：清除浮动.cf:before， .cf:after{content：“”;display:table;}.cf:after{clear:both;}.cf{zoom:1;}表单元素有前缀的属性像－moz、－box、－shadow 不包括在内，我只想让下面的代码保持干净。/* Form wrapper styling */.form-wrapper {width： 450px;padding： 15px;margin： 150px auto 50px auto;background： #444;background： rgba（0，0，0，.2）;border-radius： 10px;box-shadow： 0 1px 1px rgba（0，0，0，.4） inset， 0 1px 0 rgba（255，255，255，.2）;}/* Form text input */.form-wrapper input {width： 330px;height： 20px;padding： 10px 5px;float： left;font： bold 15px ‘lucida sans’，‘trebuchet MS’，‘Tahoma’;border： 0;background： #eee;border-radius： 3px 0 0 3px;}.form-wrapper input:focus {outline： 0;background： #fff;box-shadow： 0 0 2px rgba（0，0，0，.8） inset;}.form-wrapper input：：-webkit-input-placeholder {color： #999;font-weight： normal;font-style： italic;}.form-wrapper input：-moz-placeholder {color： #999;font-weight： normal;font-style： italic;}.form-wrapper input：-ms-input-placeholder {color： #999;font-weight： normal;font-style： italic;}/* Form submit button */.form-wrapper button {overflow： visible;position： relative;float： right;border： 0;padding： 0;cursor： pointer;height： 40px;width： 110px;font： bold 15px/40px ‘lucida sans’，‘trebuchet MS’，‘Tahoma’;color： #fff;text-transform： uppercase;background： #d83c3c;border-radius： 0 3px 3px 0;text-shadow： 0 -1px 0 rgba（0， 0 ，0， .3）;}.form-wrapper button:hover{background： #e54040;}.form-wrapper button:active，.form-wrapper button:focus{background： #c42f2f;outline： 0;}.form-wrapper button:before { /* left arrow */content： ‘’;position： absolute;border-width： 8px 8px 8px 0;border-style： solid solid solid none;border-color： transparent #d83c3c transparent;top： 12px;left： -6px;}.form-wrapper button:hover:before{border-right-color： #e54040;}.form-wrapper button:focus:before，.form-wrapper button:active:before{border-right-color： #c42f2f;}.form-wrapper button：：-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */border： 0;padding： 0;}希望大家能喜欢这个教程，并且期待你们的反馈。谢谢阅读！
成都创新互联是一家集网站建设,修文企业网站建设,修文品牌网站建设,网站定制,修文网站建设报价,网络营销,网络优化,修文网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
复制代码代码如下: .example-class{text-shadow: [X offset] [Y offset] [Blur size] [Colour];}译者注：X表示x轴上的位移，可为负值；Y表示y轴上的位移，可为负值；Blur表示投影的宽度，不能为负值；Color为投影的颜色。 堆叠多层CSS投影 虽然我们没有必要堆叠多层投影，但通过堆叠多层投影会有更好的3D效果 开始创建3D文字 你可能会选择比文字更深的颜色来作为投影的颜色，所以这个例子中我就用白色的文字，用深一点的灰色作为投影颜色，这个例子中我将H2的文字渲染3D效果，css代码如下： 复制代码代码如下:h2{text-shadow: 1px 1px 0 #CCC, 2px 2px 0 #CCC, /* end of 2 level deep grey shadow */ 3px 3px 0 #444, 4px 4px 0 #444, 5px 5px 0 #444, 6px 6px 0 #444; /* end of 4 level deep dark shadow */}效果如下：好了，到这里你已经创建了基本的3D文字，然而，让我们进一步来实现鼠标滑过的文字放大效果，并用css的transision属性实现圆滑的淡入淡出效果。 首先用transform属性实现滑过字体放大 复制代码代码如下:h2:hover{/* CSS3 Transform Effect */ -webkit-transform: scale(1.2); /* Safari Chrome */ -moz-transform: scale(1.2); /* Firefox */ -o-transform: scale(1.2); /* Opera */}效果如下：然后利用transition属性实现淡入淡出效果 复制代码代码如下:h2{/* CSS3 Transition Effect */ -webkit-transition: all 0.12s ease-out; /* Safari Chrome */ -moz-transition: all 0.12s ease-out; /* Firefox */ -o-transition: all 0.12s ease-out; /* Opera */}到此，我们就用CSS3实现了3D效果的文字，并且在鼠标滑过是让字体放大，且有淡入淡出的效果，这一切是用纯CSS实现的哦。
html5 css3样式图标制作方法：
1、html代码：
div id="boxes"
div id="boxShortcode"border-radius: 40px (shortcode)/div
div id="box1"border-top-right-radius: 40px (same on both axis)/div
div id="box2"border-top-right-radius: 20px 40px (x y) /div
div id="box3"border-top-right-radius: 40px 20px (x y) /div
/div
2、css样式代码：
#boxes div { margin-bottom: 20px; height: 50px; padding-left: 20px }
#boxShortcode {
background: cyan;
border-radius: 40px;
}
#box1 {
background: red;
border-top-right-radius: 40px;
}
#box2 {
background: yellow;
border-top-right-radius: 20px 40px;
}
#box3 {
background: lime;
border-top-right-radius: 40px 20px;
}
3、运行结果：
#Sample {
margin:0 auto; /*居中*/
width:80%;
height:50px;
background-color:#EEE;
border:2px solid #666; /* 宽度 样式 颜色 */
border-radius:5px; /* 分开写可以控制每个角 5px 5px 5px 5px，从左上顺时针设置 */
box-shadow:0 0 5px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.8);/* 每个盒子阴影效果之间用,分开；inset代表内部阴影；x方向 y方向 模糊值 rgba/16进制表示颜色，rgba(红,绿,蓝,透明度)黑色0,0,0;白色255,255,255;透明度最大1，16进制#000表示无法设置透明度 */
}
border-radius和box-shadow需要浏览器对css3支持，IE9部分支持，低于IE9需要hack，其他浏览器最新版本基本都支持。较老版本需要加前缀比如 -webkit-border-radius: 代表safari等webkit浏览器，-o-代表opera，-moz-代表firefox；
边框周围3个颜色很清楚了，一个是边框本身的颜色，一个是外阴影颜色，一个是内阴影颜色。
