Qzone是跟肤的，用户选择不同的皮肤的时候会看到不同的颜色。每一套“颜色”包括几种背景色、几种线条色、几种文字色、几种渐变色等。

互联网上还在跟肤的完整已经非常少了，但在Qzone这是一个很大的赢利点，因为跟肤配合各种付费皮肤和付费帽子、付费名片等各种自定义，极大地提高了Qzone用户中付费的比例。而Qzone用户数量又是惊人的。 之前朋友网的前身校友网也是跟肤的，后来去掉了。所以也许未来不跟肤会是趋势，但无论如何现在的架构需要我们跟肤，那么我略微整理一下相关的知识，也许对于其他人都没帮助，但可以帮助大家看清我们做这些事的大背景，也促使大家有所思考，如何在某些“限制”下完成设计。

方法

关于皮肤文件的实现方法有很多种：

1.调用某个颜色.css，在颜色.css中专门写颜色，而这个颜色.css跟日常工作是分开的。工程师只需要使用class定义某个文字是采用“强色”还是“淡色”就好了，而在 不同的颜色.css中会定义各种强色比如红色或者蓝色。Qzone采用的这种方法。好处是简单、可以很好的利用缓存等等，坏处是多一个http请求。

2.利用LESS之类的工具，在CSS中写变量，然后服务器端生成一个icenter.css。好处是少个请求，坏处是多了人力成本，不能很好地利用缓存，变更成本略大等。

生成&维护

设计师按规范设计出一套皮肤的设计稿之后输出png，png图的特定地方需要有特定的色块。我们给设计师提供了一个canvas工具，能抓取到这些色值，然后把色值填充到一个CSV文件中，然后利用cssgaga的皮肤1toN来生成对应的颜色.css。

如果某套配色需要修改，只要改对应的设计稿png，然后再走一遍流程：png->csv->cssgaga->颜色.css，再发布颜色.css即可。

规范

十几个工程师还有同样多的设计师都要统一利用class来定义强色和弱色，这个需要很好的培训和文档。培训的话腾讯使用导师制度，一般都能很快学习如何使用这种class，比如c_tx,c_tx2,c_tx3,c_bg,bg2等等等等……文档则是日常查阅用法的地方。文档规定了各种色值的用法，并且提供了工具面板直接在当前页切换配色，同时指明了规范责任人，如果在工作中与任何人有冲突了，就拉责任人进来沟通。 我们能够使用的颜色性的class包括几大类：

1.文字颜色类：全部用c_开头

2.背景颜色类：bg/bg2/bg3等等……

3.边框色，bor/bor2等等，也可以使用某种背景色作为边框色（模拟三角的时候有用）

4.表单色，包括input或者button之类的，但是很尴尬的是select不能做自定义颜色。

5.惊叹色，强烈的橙色，这个颜色不用变，所以直接写在reset之类的全局文件中就好。

技巧

在长久的与跟肤的斗争过程中我总结了一些经验：

1.模拟三角

用border来模拟三角，kaiye做了一个三角生成工具。

如果考虑跟肤的话，那么边框色值不能直接写在代码中，要使用class标签。浏览器渲染边框的时候，如果定义了边框色border-color，那么优先使用边框色，如果没有定义，那么使用文本色，如果没有定义文本色，那么使用继承下来的文本色。所以我们会有c_bg这样的接口。

多个三角以及三角和其他图形，圆角图像等组合的时候又能形成新的形状，这是很有意思的。大多数时候这 又是乏味的，所以我们有跟肤的三角组件，在需要的页面中可以直接引入样式，html中只用修改颜色就好了。

2.RGBA

在跟肤页面中，工程师的样式比如icenter.css里是不应该有颜色值的定义的，但是有例外，RGBA就是一种。

因为RGBA包含了透明度，所以叠加在我们的背景色上，实际上也是跟肤的效果。

我们在某些地方使用过自定义的webkit滚动条（渐进增强，IE不用拥有这个特性，但是仍然具有可用性）：

::-webkit-scrollbar-thumb:rgba(256, 256, 256, 0.15)

事实证明效果非常好。

3.半透明图

除了RGBA以外还有一个类似的方法就是带alpha透明度的png（8或者32都可以），叠加在我们的背景色上也有跟肤的效果。IE6用一个下划线hack干掉背景，不要用滤镜。

更多技巧大家从Qzone的代码中去发掘吧~