实话说，在软件开发道路上的起步并不完美，焦头烂额的纠结于未知领域的百度的同时，将曾熟悉的知识渐渐遗忘；在新的项目中手足无措的胆怯中敲打着不知道如何在项目中体现的编码。这一步，迈的有些沉重。

我无意于在这样的哀怨中沉沦，总在想尽办法的挣脱，我试着畅想十年后的自己，对比十年前的自己，我不想接下来这个十年也这样的浑浑噩噩。其实我总是个慢热的人，适应的过程总是很漫长，而这漫长的蛰伏如何不能积蓄我破茧的力量。这条路，我找了很久才发现，迈上了才知道正是自己的方向，苦点，累点，那又算什么...

啰啰嗦嗦那么多，让我们回到当前，这只是开始，那就踏踏实实走下去，一步一步。

暂时太多不知道的知识，就让从最基础的开始，在设计网页方面，我天生的缺乏美感，总设计不出友好的界面，归根究底，“看的少”和“会的少”，然后在这里记录学习一下form表单的一些元素美化，起码这个总常用到吧。

（1）

最终效果图：

（2）

现在让我们来一步一步实现它：

首先：我们需要完成一个基础的form表单

 1 <body>
 2     <div id="mainContent">
 3         <center>
 4             <form action="" id="searchBox">
 5                 <input type="text" id="searchText" placeholder="zheli">
 6                 <input type="submit" value="search" id="submit">
 7             </form>
 8         </center>
 9     </div>
10   </body>

这时的效果如下：

这里要注意一点 ：placeholder=“”，类似于value，但是等你输入数据的时候会自然清除掉，这是不同于value的。

其次：我们设计外面的form来形成外面的框架

 1 #searchBox{
 2     background-color:#eaf8fc;
 3     background-image:linear-gradient(#fff,#d4e8ec);
 4     border-radius:35px;            
 5     border-style: solid;
 6     border-width: 1px;
 7     border-color: #c4d9ef #a4c3ca #83afb7;
 8     width: 500px;
 9     height: 40px;
10     overflow: hidden;
11 }

此时效果图如下：

这里特别需要注意的几点： border-radius圆角知道后感觉非常简单，而且它的合理应用会让整体效果更上一层楼；

　　　　　　　　　　　　 background-image:linear-gradient(#fff,#d4e8ec)会呈现一种突出效果；

然后，我们来设计text的美化

1 #searchText{
2     border-radius:50px 3px 3px 50px;
3     padding: 5px 9px;
4     height: 28px;
5     width: 380px;
6     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1); 
7     font: normal 13px 'trebuchet MS', arial, helvetica;
8     margin-top: 5px;
9 }

此时效果图是这样的

这里特别注意的有：仍然是border-radius四个元素分别是上左、上右、下右、下左的顺时针排列的

　　　　　　　　　box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1)这个是显示重影效果

最后我们再完成submit的设计，也是对前面css的基本重复

1 #submit{
2     border-radius:3px 50px 50px 3px; 
3 }
4 #submit:hover {       
5     background-color: #95d788;
6     background-image: linear-gradient(#6cbb6b, #95d788);
7 }

就达到了最初的效果

当鼠标放上之后显示变色效果如之前的效果展示。

这个搜索框我们这样看来是非常简单的，我们现在来总结一下有那些合理的美化应用：

1、圆角　　border-radius的设置 四个参数 分别为 左上角开始的顺时针排列的四个角

2、合理的应用对form的美化  　　form表单也是可以美化的，之前都太僵化于对form内表单元素的美化了，太局限，要放开思维

3、输入型提示语消失　　　　placeholder的应用，相比较value还是有一定优势的

4、重影效果　　　　box-shadow的合理设置，只是简单加一点重影效果，立体的感觉就出来了

没有无缘无故的爱，就像没有无缘无故的恨，没有毫无用途的效果，只有合理应用的美丽，十年磨一剑，我愿从点滴做起，爬向美好的明天。