一、简介
之前写过一篇文章《关于Google的圆角高亮高宽自适应按钮及其扩展》，介绍了如何使用css实现圆角高亮按钮。 然而，这些按键的圆角只有1个像素大小，渐变最多可以有三种颜色，而且色带差异明显，即高光投影效果显着。 而本文将进一步推进这种性能、技术等——实现2像素的真正圆角，并且按钮具有简单平滑的渐变效果，其丰富的色调可以支持6种过渡颜色，从上到下都有有 9 种可用颜色。 本文将通过专业的图片和动画来演示原理，将代码可视化，并提供demo。 希望您能够充分理解这些技术。
2、效果展示
首先看右图：
这是按钮放大 6 倍时的样子：
您可以看到从上到下以相同高度排列的色带，以及标准的非大圆角。 这些都是使用css实现的，在所有浏览器下性能都是一样的。
您可以点击：按钮演示效果| 美化版的 HTML 和 css 代码
3. 实施概述
1、要实现2像素的圆角，至少需要三层标签嵌套（因为IE需要使用vml语言实现圆角，不像Firefox、chrome等 -moz-border-radius 和 -webkit-border -radius 用单个私有属性代码即可实现，所以这里不考虑使用定向css），因为圆角的角点需要使用三个不同原点的交叉坐标； 再加上渐变的实现，所以内外层一共需要四个标签。 为了让IE6能够使用css实现hover的效果，最内层是标签，里面是内联元素标签，span、i、b、strong、cite都可以； 最后需要一个标签来显示文本内容（这个标签还辅助Gradient），可以和渐变标签层平级，所以最终有四层css圆角按钮，五个标签。
2. 现在假设五个标签从内到外、从上到下分别是a、b、c、d、e。 那么标签a的作用是按钮的上下边框，标签b是实现按钮的圆角，标签c是实现按钮的左右边框，并使用背景色作为渐变color，标签d的左右是实现三种渐变颜色，标签e的功能是加载文本内容，扩展按键空间，上下边框颜色充当两种渐变颜色。 五个标签的巧妙配合，实现了六色渐变的圆形按钮。
4. 原理演示
首先你要知道一个标签：背景色+边框色可以产生一个方向的三种颜色。
下面是实现原理。 一旦你了解了它实现的巧妙之处，你一定会觉得技术是一个非常美丽和奇妙的东西。
下图是5个标签的分解图，是600%放大倍率下的疗效，以展示5个标签各自的功能。
也许乍一看，你不知道里面的签名图想表达什么。 你可以发挥你的空间想象力：将b图案放在a上，将c放大到b上，然后将d放在c上，最后将e放在d前面。 一旦5个标签图案叠加完毕，这就是本文的演示按钮了。 我相信我们对于编写这样的代码还是能想出一个大概的思路的。 如果您因为最近太热而不想考虑它，下面的视频演示了按顺序堆叠每个选项卡的好处。 我想在这里说声对不起。 一是视频颜色丢失，白色背景变红，效果失真； 是为了压缩视频大小来保证观看流畅，所以视频质量有点惨不忍睹。
您可以下载视频的清晰版本：video_btn.wmv
我想你应该对五层标签各自的位置和作用有一个大概的了解了。 这五个标签就像本赛季的火箭队。 没有明星，但他们相互配合，发挥各自的特长，依然红火。 因此，您现在可以从上到下用色带序列标签来标记这五个标签的边框或背景。 这和插上按钮类似，每个标签的位置都是固定的。 当按钮需要使用其他颜色（不是这里的红色渐变）时，只需按顺序替换即可。
根据重叠后从上到下指示谁可见的原则，以下是指示丝带顺序的结果图：
5.利用时序图方便扩展
我举个例子来说明时序图在改变按钮颜色方面的极大便利。 例如，我想将前键的红色渐变更改为蓝色渐变。
简要步骤：
1、挑选颜色，打开photoshop，选择合适的前景色和背景色，用渐变工具画出渐变色带，我随机选择了两种颜色（貌似不常见的颜色），如下图：
2、垂直分成六等份，分别选择等宽的颜色。 例如选色结果从上到下依次为：#a9bee2、#a2b6da、#9baed0、#92a3c3、#8898b6、#8190ac（分别表示表1、2、3、4、5、6中的黑色颜色处的数字）；
3. 对比顺序标签表，按顺序替换颜色。 例如：图标上的数字1对应的是e标签的上边框颜色，所以替换为border-top:4pxsolid#fafafa； 原始 e 标签的 border-top:4pxsolid #a9bee2;; 数字2对应d标签的上边框颜色，所以替换border-top:8pxsolid#f8f8f8； 带有 border-top:8pxsolid #a2b6da; 的原始 c 标签。 不管是背景颜色还是边框颜色等等，替换掉，最后选择合适的颜色来替换边框颜色（这个可选择的范围比较大）。
4、以下是颜色替换后的效果图：
您可以点击这里：蓝色按钮演示页面
6、高度自适应等。
为了便于在photoshop中解释和演示，本例以像素（px）为单位，六色渐变带，每个色带为4个像素，加上上、下、内、外边框各4个像素，该按钮总共 28 像素高。 由于它以像素为单位，因此不支持高度自适应。 如果更改上面的字体大小，按钮不会相应变高。 在实际项目中，如果要使用这种技术，应该使用em作为单位。 只需将所有px替换为em，并将字体大小放在外部控制中即可。 至于值颜色，则无需更改。 当然，如果你对 em 这个单位不熟悉，那么使用 em 并不是一个好的选择。 不过，我建议深入研究它们。 它不仅仅是一个单位。
整个CSS代码没有高度或宽度属性。 如果有宽度，就不再自适应长度了。 如果有高度，在IE6下布局会拉伸。
7. 可能发生的争议
世界上的一切事物都有两个方面。 每枚硬币都有两个面。 记得一位天猫开发人员向程序员讲述一些程序开发问题时表示，作为一名程序员，想要在技术上有所作为，其中之一就是接受能力。 按照他的说法（以下不是原话，大意），工作了几年的程序员往往对开发有自己的一套思考，如果接受的一些新事物与自己不在同一个轨道上对自己的思考，他们常常有一些抵触情绪。 那么说到这里，一些熟悉图片使用的有经验的开发者可能会调侃：你看css圆角按钮，有很多行css代码，一层又一层的HTML标签，我制作一张图片，两层标签，可以达到更好的效果。
我敢说我在这篇文章中谈论的内容是相对较新的，至少是在其他地方很少见到的。 形成嘲讽也是正常的，我想，如果这篇文章讲的是如何把画面优化到极致，达到这样的疗效，那么就不会被嘲讽，而是会学习和分析，因为这是同一个赛道和同一方向。 对于不同观念、观念的新事物，我们必须打破潜意识的自我保护敌意。 我们需要静下心来，包容、接受、分析，去其糟粕，取其精华，取长补短，这样才能真正强大。 原地踏步，排斥只会在竞争的道路上逐渐衰落，进而被别人超越。
现在冷静下来，抛开心中的敌意和惊讶，来分析一下本文的这个方法，分析它的可用性，分析它的优缺点。
缺点
1.css相对较多，HTML标签层次也较深。
2、难度。 关键是难度（difficulty）。 多层标签都是像素级别的。 里面的每一句css都是我经过反复实践验证的，它有它存在的理由。 小小的css代码里蕴含的知识真的很多。 对于css初学者或者自认为很好的css人员来说很难理解透彻，自己写起来也很困难。
2、效果实现的局限性。 当渐变色的跨度较大时，效果的表现就比较费力，从正面白色按钮的疗效就可以看出。
利润
1、与图片实现相比，加载尺寸更小。 不管有多少css和html，都比图片的尺寸要小，而图片圆角的按钮如果要适应长度，就必须尺寸长一些或者图片被分段，而它的大小比数百个字母大得多。
2.图片适应性不强。 纵观目前所有的图片式按钮，基本上都是长度自适应，但高度不自适应。 也许你觉得没有必要，或者根本就没有想过（注重人气，签~~）。
3、可能会少一个图片链接的请求。
4、按钮——图片是一一对应的关系，该颜色的图片只能实现该颜色的按钮。 还有css，同样的css结构，只要对比图标，改变颜色参数，就可以有任意颜色的按钮。
5、维护保养更方便。 如果要换图片按钮，就得用photoshop重新裁剪图片等等，如果是大的精确的css精灵图片，哦，那就要费很大的功夫了。
6.更多的开源和共享。 只要复制代码，改一下颜色，很多网站都可以用。 但图片，尤其是大图上集成的图片按钮无法打开，难以方便分享。
7、提高网站的技术纯度。
嗯，我发现这太啰嗦了。 我并不是说这个方法有多好，因人而异的技术水平（初学者用这个方法费力），因人而异的观点（我主张流动和扩展，别人不一定），从项目到项目（小网站，小项目，如果没有太多维护，就直接拍照）。 写这篇文章的目的是展示我的研究经验并让其他人知道。 至于其他人是否采纳，那就是另外一回事了。 我只是希望能够启发别人的思考。 不要迷失在一些现有的技术中，跳出来，多思考，多尝试，新的东西是由你创造的。
