芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
3

漂亮的 CSS3 搜索表单设计

作者 芒果/分类 代码/发布于 2010-05-14 09:15

最近一直把玩 CSS3 相关的东西,也发现了一些新的 CSS 技巧。你知道如何使用 border-radius 创建圆形图案、使用 box-shadow 创建内部阴影效果吗?芒果带你仔细阅读这份使用 CSS3 的 gradient、border-radius 及 box-shadow 属性所制作的漂亮的搜索表单案例。它能够在支持 CSS3 的浏览器中完美呈现,对于不支持 CSS3 的浏览器也可以良好降级,以保持可用性。

查看演示:http://www.webdesignerwall.com/demo/css3-search-form.html

圆形图形技巧

你可以通过为 border-radius 属性指定一个非常大的值,以创建一个圆形图案。下面的示例使用 100px 的边界半径作圆形。

.circle {
	width: 100px;
	height: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
}

round-circle

内阴影效果

通过指定 box-shadow 属性的 inset 参数来创建一个内阴影效果。截至目前,此功能仅在 Chrome 4+ 和 Firefox 3.5+ 中被良好支持。

.inset {
   -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
   -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
   box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
}

box-shadow-inset

搜索表单示例

以下这个搜索表单演示正是使用了 CSS3gradient、border-radius 和设定 inset 参数值的 box-shadow 属性(请使用 Chrome 4+ 或者 Firefox 3.5+ 浏览该示例。它能对不支持 CSS3 的浏览器良好地降级。请查看源代码来学习 CSS 代码的使用。如果你不熟悉 CSS3,可以阅读芒果以前的文章CSS3 基本要素概览
search-form-preview

英文原稿:Beautiful CSS3 Search Form | WebDesignerWall
翻译整理:漂亮的 CSS3 搜索表单设计 | 芒果

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/beautiful-css3-search-form/" title="漂亮的 CSS3 搜索表单设计" rel="bookmark">漂亮的 CSS3 搜索表单设计 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 3 条群众意见

  1. ZhouQi /2010-05-14 15:22

    加个 hover、focus 状态就完美了。 回应

    #1
  2. 为网站而疯狂 /2010-05-15 07:49

    很好!如果主要浏览器都支持,那就完美! 回应

    #2
  3. ?
    Tweets that mention 漂亮的 CSS3 搜索表单设计 | 芒果 -- Topsy.com /2010-05-15 10:27

    […] This post was mentioned on Twitter by 芒果. 芒果 said: 漂亮的 CSS3 搜索表单设计: 最近一直把玩 CSS3 相关的东西,也发现了一些新的 CSS 技巧。你知道如何使用 border-radius 创建圆形图案、使用 box-shadow 创建内部阴影效果吗?芒果带你仔细阅读这份… http://bit.ly/bCii17 […] 回应

    #3

下面我简单说几句