关于Google圆角高光高宽自适应按钮及其拓展

1、前言
对于一门技术而言，要想达到真正的高度，须要造成本身关于这门技术的世界观。我在研究css上花费的功夫相对多些，但还不至于造成css世界观的程 度，css是如此精深的一门学问，不只仅是一门技术，更融入了美学，哲学的东西。固然，对于css，我是有本身的一套约束准则的，请容许我称之为“鑫三无 准则”，即无浮动，无宽度，无图片。这是为了css的模块化以及可扩展性须要尽可能遵照的准则。然而，现有国内各种大大小小的网站，作到这一点的有多少呢， 不多，并且各个网站差距很大。即便国内前列的互联网公司网站的css代码也是有明显的档次之分。
若是要学css，不建议看淘宝网，其css估计维护改动颇多，已经是千疮百孔，hack巨多。人人网、新浪博客能够说算是css不错的网站，一个一个分析其 css用意，会学到不少东西的。而谷歌能够说是css最精深的网站了，其网站css技术含量真是很高，新浪，人人，腾讯之类与其不在一个档次。更准确的说 是与谷歌网站相比，新浪之类的网站没有一个很贯彻的css理念，也能够称为css的世界观。谷歌网站将css的可维护性，css的前瞻性发挥到极致，如何 极致法？好，这里我就拿Google（谷歌）上的看似普通的按钮阐述谷歌网站css的技术强在哪里，为什么说其css的前瞻性发挥到了极致。本文后半部分根 据总结的一些相关启示，从新付诸一些优化方面的实践，将本文主题意义推到可实践性的高度。

2、目录
1. 关于Google圆角高光高宽自适应按钮
①如何用高效的css代码实现
②此按钮的优势在何处
③给咱们的启示
2. 关于虾米网全选等圆角阴影宽度自适应按钮
①原按钮分析
②如何用纯粹的css实现
③css实现的按钮的优势

3、内容
1. 关于Google圆角高光高宽自适应按钮

首先，来看一下这个所谓的其貌不扬的按钮是个什么样子：

谷歌gmail邮箱中出现的圆角高宽自适应按钮

网上有句话很流行，叫作“我很丑，可是我很温柔！”这句话的境界与这个其貌不扬的按钮可谓一致，乍看这个按钮，很普通，第一反应是制做很简单嘛—— 打开photoshop，拉个2像素圆角的圆角矩形，渐变填充便可。可是，用firebug一看此按钮的“心里深处”，额！惊住了，全是css代码构成 的，没有一丁点的图片，从圆角，到高光渐变全是css实现。更难能难得的是这个按钮不只宽度自适应，高度也自适应，而 且能够与文字，图片混排。可是我不建议您用firebug去看其按钮实现，缘由在于这个按钮已经融入在整个页面的体系中，其HTML以及css代码是至关 复杂的，或许其中还牵涉到JavaScript——按钮是全div标签实现，其鼠标通过样式一定借助于JavaScript实现（考虑到IE6），并且实 际上的层级无需firebug看到的那么复杂。
这里我将提供通过本身反复试验，能够说是至关精简高效的css代码（方法多种，这里仅提供我认为最好的方法）实现上图所示的按钮效果，并针对css样式提供一系列具体的分析，所涉及到的一些分析都是网上不多有的。

①如何用高效的css代码实现
关于此按钮的实现，您能够狠狠地单击这里：demo实例页面，里面有按钮效果展现，以及css代码的展现。
首先，看一下在各个浏览器下的最终效果：

这里是实现此效果的css代码：

.g_a{display:inline-block; border-width:1px 0; border-color:#bbbbbb; border-style:solid; vertical-align:middle;}
.g_b{float:left; background:#e3e3e3; border-width:0 1px; border-color:#bbbbbb; border-style:solid; margin:0 -1px; position:relative;}
.g_c{display:block; line-height:0.6em; background:#f9f9f9; border-bottom:2px solid #eeeeee;}
.g_d{display:block; padding:0.1em 0.6em; margin-top:-0.6em; cursor:pointer;}

HTML代码以下：

<a href="#nogo" class="g_a">
     <span class="g_b">
         <span class="g_c">&nbsp;</span>
         <span class="g_d">圆角按钮</span>
     </span>
</a>

css及HTML代码分析：
►原来Google的按钮是使用div实现的，若是要想要让div标签在各个浏览器下实现图文混排，以我如今经验来看，势必用到hack，或多一行 css。因此这里我使用inline属性的标签a，span实现效果。inline属性的标签在inline-block属性下能实现相似于 inline-block的效果，与支持inline-block的浏览器一块儿，就能够无需hack实现按钮与图文混排的效果（inline或 inline-block属性的元素能与文字同行排列）。
►最外层标签（a标签）css中的vertical-align:middle属性是可选样式，这里添加主要是为了和文字在一块儿时居中显示，更温馨的布局。
►第二层标签（span标签）样式中的position:relative属性是为了解决IE6下margin负值部分不可见的bug，浮动是为了使IE六、IE7下向左的margin负1像素起做用。
►第三层标签含有两个并列的span标签，它们display属性设置为block是为了自动换行排列且宽度100%显示，固然，您千万不能设置 width:100%，不然IE6下会有麻烦的。其中第一个span标签的line-height是为了设置高度，千万不能直接使用height撑开高 度，缘由在于在IE下，height会使标签有haslayout属性，宽度会撑开，满屏显示的。

②此按钮的优势在何处

★能够与文字混排，对vertical-align属性敏感，见下图：

按钮与文字能够任意混合排列

★宽度自适应于内部文字的个数，高度自适应于内部文字的大小

高度宽度自适应于内部文字大小或个数

须要提示的是：要想实现高度自适应，内部标签请使用em作单位，文字大小的改变请改变最外层标签的大小，不然只是文字变，而高度不变。em单位大有学问，不是本文重点，很少说，您能够尝试着研究研究。

★支持用css实现鼠标通过样式改变
这是由于最外层标签是a标签，IE6随不支持div标签的hover样式，可是支持a标签的hover样式，因此这里能够直接经过css实现鼠标通过按钮，按钮样式改变的效果。例如，原谷歌gmail邮箱中的按钮的鼠标通过样式是边框颜色的加深，在我提供的demo实例页面中第一部分的第5小项按钮就是实现的这个效果，您能够本身试一试。

★页面性能提成，开发维护成本下降
很显然的，使用几行css代码代替图片实现一样的效果，页面加载的大小更加小了，字符显然比图片要小不少；服务器连接请求次数少了，少一次图片的请求；而 且高度也自适应，这是图片难以实现的；若是须要改动，只要改改代码就能够了，不须要再很麻烦的图片处理，保存等，维护成本大大下降。

③给咱们的启示
我以为Google的这个看似普通的按钮的最大启示不在于技术，而是一种意识，一种思想，一种关于css的思想。咱们在写很传统的程序的时候，例如 C++，很强调代码的可移植性，可扩展性，健壮可读性等，就是说一段代码，要可以预见之后它可能会作的修改，在编写的时候就最大程度的注意这些可能的修 改，使得后期的维护更加方便，这种思惟在程序开发中彷佛很广泛，非常必须的了。然而，css有别于传统的代码，我虽然看到了国内css技术的进步，开始注 重扩展性，维护性了，可是程序代码中那种意识彷佛尚未贯彻到css中，太多的浅尝辄止。

然而，Google彷佛作了一个领跑者，或者说是引导了一个方向，其网页中就深深的有着软件编程的思想。应该不少人都没有注意到，Google的这 些产品的页面，不只宽度自适应，高度也自适应，页面文字大小可调节（比例调节-浏览器，和文字尺寸调节两种），并且不管文字变得多大，其整个页面布局都是 良好的，包括一些细节的东西，例如本论所着重讲述的按钮，都是显示良好的。再看看新浪，腾讯这些门户，或是人人，淘宝，页面都不会这样。我这里没有哪一个好 哪一个很差的意思，这实际上是两种理念而已，两个方向而已。一类以像素为单位，强调精确布局，强调小细节上的重用性；一类是一em为单位，强调彻底的重用性。 前者实现的页面精致，布局精良，看似稳固；后者布局则谈不上精致，流动性的。拿终结者人物做比喻的话，前者就是施瓦辛格演得那个固态金属机器人，零件安 装；后者就是那个液体金属机器人，可液态变形。

假设如今全部用户的显示器大部分都是1440像素~1600像素的，那么，像腾讯，新浪，阿里巴巴这些网站都是要从新改版的，由于960~1000 像素宽的网页在这些浏览器下就显得很狭窄了，要知道，这改版的成本可不小啊，不是改一两个页面的问题啊！然而Google会有这样的问题吗？不会的，其早 就预见到这一点了，因此它的页面都是流动性布局宽度自适应的，显示器多宽，其页面自动拉伸到该宽度。在这一点上，显然Google更甚一筹。然而，让腾讯 这样的网站改为相似Google产品的网站显然是不可行的，这其中有理念的差别等不少不少缘由。可是，不能否认的是，谷歌页面中所体现的这种思想，这种意 识是值得学习值得深思的。

就我个 人而言，我是深受谷歌网页前端布局思想的影响，在不断的实践中，造成了本身的“鑫三无准则”，其实就是不断思考如何将css的可扩展性发挥到极致而造成 的。其中的“无图片”就是与本文主题密切相关的。因为本身已经造成意识，因此每当浏览到不错的页面的时候，总会下意识地想，这个效果可不能够直接用css 实现，这个习惯让我进步不小。这里我就举与本文主题相关的一个例子，昨天误入虾米网，界面等作得不错，我就分析哪些能够进一步优化的，其中就包括看似只能 用图片实现的按钮如何用高效的css代码完成。请看本文下半部分——用css实现虾米网音乐播放下载的圆角投影按钮。

2. 关于虾米网全选等圆角阴影宽度自适应按钮

①原按钮分析
首先，请看虾米网我的主页这几个音乐选择及播放的按钮

这几个按钮作的还不错，看上去很舒服，想必基本上全部第一眼看到这个按钮的人都会有诸如“这个按钮图片不错”这样的想法，确实，在虾米网这个网站上这个是用图片+css实现的。这是该背景图片地址：http://img.xiami.com/res/img/default/goplaybg.gif单 击后在新页面打开，能够看到这个css工程师仍是有必定技术的，css Sprite用得很熟练，也考虑到的重用性问题，实现了必定宽度范围内的宽度自适应。看HTML代码和css部分，使用双层标签+浮动实现的宽度自适应， 恕我直言，这位css工程师要学的还有不少。触犯了“鑫三无准则”中的浮动和图片两条，尤为浮动，浮动会大大增长代码成本，应该避免的，这里不扩展叙述。
其实这里无需浮动，无需图片，就能够实现如出一辙的效果，并且代码高效简洁。

②如何用纯粹的css实现
图片是最好的证实，下图是本身用css写出来的按钮效果，各个浏览器下表现都是一致的（除IE8未测），因此这里就只展现IE6浏览器下的效果。若是您已经打开了demo实例页面，在页面的下半部分就能够看到这个按钮的效果以及优势介绍了。

灰色按钮css代码：

.x_a{display:inline-block; border-top:1px solid #d6d6d6; border-bottom:1px solid #e5e5e5; font-size:12px;}
.x_b{float:left; border-left:1px solid #d6d6d6; border-right:1px solid #c2c2c2; border-bottom:1px solid #c2c2c2; margin:0 -1px; position:relative;}
.x_c{display:inline-block; padding:0.3em 0.6em 0; background:#f4f4f4; border-left:2px solid #ffffff; border-top:1px solid #ffffff; border-bottom:0.2em solid #f0f0f0; line-height:1.1em; cursor:pointer;}

HTML代码以下：

<a href="#nogo" class="x_a">
     <span class="x_b">
         <span class="x_c">高光投影按钮</span>
     </span>
</a>

一些代码方面的注意点与谷歌按钮相似，这里要比谷歌的那个按钮要简单些，难点在于颜色的选取，颜色取准了，效果也就很逼真了。

③css实现的按钮的优势
相比较虾米网网站原版的按钮，优势那是多多的啦，整体而言，也就是谷歌按钮中所提到的些有点，包括：
※与图片文字任意混排
※高度与宽度的自适应里面的文字
※使用css便可实现鼠标通过样式的改变
※没有使用图片
从下面的截图能够看出一二，其中最后4选项的灰色按钮为鼠标通过时的样式，与网站上图片实现的效果一致。

css实现的虾米网按钮的一些优势

您能够狠狠地点击这里：demo实例页面

4、结语 整这篇文章又花了超过10个小时的时间，彷佛唠哩唠叨说了很多。最后仍是要总结性的强调，写这篇文章的目的不只仅是为了说明如何用css实现一些貌似图片 才能实现的按钮效果，更重要的是传达一种意识，一种相似于编程的预见性意识，一种如何将css的可扩展性发挥到极致的意识。只要拥有了这种意识，您就会花 不少功夫去钻研css方面的东西，您的技术，您的css层次将会获得飞速的提高。css博大精深，你我都只在底层攀爬，所学甚多，只有戒骄戒躁，潜心钻 研，才能成为真正在css上有心得的人。