玩过游戏的应该知道，在游戏中经常能出现非常漂亮，不同寻常的输入框，无论是输入框的边框或是光标都设计得相当富有创意。对于设计游戏网站来说，设计独特的输入框也是一项富有创造性的工作，虽然网页设计不能完全替换网页的外观成为游戏界面，但是对于细节上的设计也能够做出一些较有革新的改变，我们在此以一个简单的圆角型输入框设计来尝试改变输入框的外观。天津网站建设公司，天津网站制作公司，天津网络公司，天津网站优化。天津吊车出租
我们希望输入框能达到如上图所示的具有圆角边框及抗锯齿字体的效果，对于这样的设计而言，视觉设计上的重点在于图片的设计，在完成输入框的CSS代码前，我们先准备将上图制作成二张GIF图片作为输入框的背景。由于ilame和password具有两个不同的背景图片，因此有必要对name及、password的输入框进行重新命名
使用background-image:url(name.jpg)使两个输入框都拥有了相同的背景图片，不过在下来的样式表中，我们又重新对卸assword设置了新的背景图片以覆盖掉上面的设置，因为二者除了背景图片之外，其他属性完全一致，因此可以通过简单的覆盖单独属性的方法来买现样式的先共享，后覆盖。使用了背景图片之外，通过width及height属性，将将输入框的宽度调整成与背景图片片一大。为了保证最终用户输入时的文字在name及password英文单词之外，以及在整个输入框中保持居中状态，我们使用了line-height使文本在输入框中有了一定的行高，因此文本推到了居中的位置。同样，text-indent便得文本左缩进也达到了我们使文本位于图片背景的文字之后，最终完成了我们所需要的效果。。通过背景图片的设计，我们完全可以改变输入框的外观，相信如果碰到游戏网站或其他需要另类风格的网站，应当不再会局限于方块状的输入框设计了。