优化输入框的显示，使得填空题更像填空题

当填空题系统的功能实现以后，我们要做的第一件事是什么？对，就是优化它的显示方式，或者说使其更加美观。一旦系统界面变的好看了，它的吸引力就会增强许多。本文讲述的就是如何将输入框美化，使其更加符合人们的审美。

一般来说，填空题的输入框为一段特定长度的下划线，而未经优化的输入框是一个中间为白色的方框，这样的方框看起来有点突兀，尤其是在填空题中。为了改善这种状态，使其看起来更加符合填空题的风格，我们需要对其进行美化。这里，我们需要用到的美化标签为border-top-style(上边框样式)、border-right-style(右边框样式)、border-bottom-style(下边框样式)、border-left-style(左边框样式)和border-bottom-color(下边框颜色)。填空题需要的是下滑线，因此我们将border-top-style、border-right-style和border-left-style的属性都设为none，border-bottom-style的属性设为solid(实线)。为了使其看起来更加美观，我们还可以设置下滑线的颜色，这时border-bottom-color就派上了用场，这里我们将其设为绿色(green)。

经过上述的美化后，输入框变成了中间空白，有着绿色下划线的方框，这样是不能达到我们的要求的，因为方框中间的白色与背景色相比会显得格格不入，为了改善这种状态，我们需要将输入框的背景色改为全透明的，这样输入框的背景色就会与背景色完全相同，从而达到了我们的需求，这里我们会用到背景色rgba这个属性，其中a对应的是透明度，1为不透明，0为透明，因此只要a为0，rgb不论什么颜色都不会对其产生任何影响，因此rgba可以设为rgba(249,247,248,0)。

为了使输入框看起来更加友好，我们还可以使用padding-left来调节输入文字的初始位置和输入框左边框的距离，比如padding-left设为0.5em。经过以上的调整，一个美观的填空题输入框就完成了。具体代码如下：

.input{width:70px;border-top-style:none;border-right-style:none;border-left-style:none;border-bottom-style:solid;border-bottom-color:green;background:rgba(249,247,248,0);padding-left:0.5em;}

最后，谢谢大家的阅读。