第一种:

<style>
.googleSearch
{
border: 1px solid rgb(126, 157, 185);
padding: 2px;
background: rgb(255, 255, 255) url(http://www.google.com/coop/images/google_custom_search_watermark.gif) no-repeat scroll left center;
-moz-background-clip: -moz-initial;
-moz-background-origin: -moz-initial;
-moz-background-inline-policy: -moz-initial;
}
.tipSearch
{
background:#FFFFFF url(http://blog.eshangrao.com/themes/WebPlume/img/q.png) no-repeat scroll 4px center;
padding-left:18px;
}
</style>
<body>
<input type="text" size="40" class="googleSearch"/>
<input type="text" size="40" class="tipSearch"/>
</body>
第二种:
<style type="text/css">
.StdTextBox {height:16px;font-family:verdana;font-size:9pt;border:solid 1px black;filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='false');}
</style>
本文提供了两种不同的CSS样式示例,展示了如何使用内联样式为输入框添加边框、背景及阴影效果。通过这些示例,读者可以了解到如何在网页中实现美观且实用的搜索框设计。
4505

被折叠的 条评论
为什么被折叠?



