chm版下载：CSS参考手册v1.2.2

　　1. 有部分童鞋反应，下载了chm的CSS参考手册后，出现网页打不开的情况，如下图：

解决方法（下图示）：

在 css.chm文件名上邮件，选“属性”，然后在上图中的“安全”一项点击“解除锁定”即可。

　　在线地址：web前端开发参考手册系列之CSS参考手册

　　chm版下载：CSS参考手册v1.2.2

　　chm版下载：CSS参考手册v1.2.2

　　坚持了近半年，这本全新的CSS参考手册终于面世了。内容涵盖CSS2.1和大部分CSS3。

　　由于个人的精力有限，手册内容难免出现错误和问题，望广大网友不吝斧正。请将您发现的问题提交到CSS参考手册问题反馈，用以表达对您的感激，将会在手册内的鸣谢页面列出您的名字。

　　同时，您可以随时访问 CSS参考手册官网 检查并获取更新版本。

　　本手册的部分内容参考了苏沈小雨版的CSS2.0手册及World Wide Web Consortium (W3C)公开的网络文档。

　　衷心感谢所有支持本手册的朋友，正是有了你们，本手册才会越来越完善。

　　列举手册的几个特征：

• 内容包括CSS2.1和大部分CSS3
• 所有手册内容都写有对IE6, IE7, IE8, IE9, Firefox, Chrome, Safari, Opera支持程度
• 每个属性及其它相关内容都有可浏览的DEMO示例
• 手册的在线版也适当的使用了一些CSS3，感兴趣的朋友据此可以直接体验到CSS3的部分特征

　　手册部分内容截图：

　　如上图为border-image语法

　　如上图为对Multiple background的详细说明

　　更多精彩内容尽在手册内，欢迎使用。

　　在线地址：web前端开发参考手册系列之CSS参考手册

　　chm版下载：CSS参考手册v1.2.2

　　场景是将Data属性也在Style静态资源中定义，这时候就会产生上述问题。

如以下定义一个“打勾”的图标资源：

<Style x:Key="IcoHook" TargetType="Path">
     <Setter Property="Data" value="这里是Data的Value"/>
     <Setter Property="Fill" value="#ffeeeeee"/>
     <Setter Property="Stretch" value="Fill"/>
     <Setter Property="Width" value="16"/>
     <Setter Property="Height" value="16"/>
</Style>

　　假设我们有以上一段目标类型为Path的Style静态资源，那么如果这时如果有多个Path控件如下面的代码引用这个资源：

<Path Style="{StaticResource IcoHook}"/>

　　则最终这多个Path只有一个会被显示。

　　解决方案是将Data属性从Style静态资源中删除，并将Data的Value值单独定义为System.String静态资源，然后Path控件同时引用Data和Style这2个静态资源。

用新方案重新定义这个个“打勾”的图标：

<System.String x:Key="IcoHookData">这里是Data的Value</System.String>
<Style x:Key="IcoHook" TargetType="Path">
     <Setter Property="Fill" value="#ffeeeeee"/>
     <Setter Property="Stretch" value="Fill"/>
     <Setter Property="Width" value="16"/>
     <Setter Property="Height" value="16"/>
</Style>

引用方式：

<Path Data="{StaticResource IcoHookData}" Style="{StaticResource IcoHook}"/>

　　此时，该“打勾”图标就能在任意多处使用。

　　Tips: 在Blend里，如果是以第一种方案来引用资源，除了不能多处使用外，还是不可视的，只有运行出来后才能看到，如果是以第二种方案来做，则在Blend里能实现可视。在VS里2种方案都不能被可视，但第二种方案的使用是正常的。

　　很遗憾，中国仍是使用IE6的主力军，IE6在中国的用户高达34.5%，占全球IE6使用率12.0%中的5.9%，这也就是说IE6的使用者有一半来自中国。

　　从身边开始，影响每一个人，我们不应成为“文明”进步的绊脚石。升级你的IE6，是时候与IE6 Say Goodbye了。

　　background-size是CSS3提供的一个新特性，它可以让你随心所欲的控制背景图的尺寸大小。先简要的看看background-size的用法。我们知道在CSS2中，背景图的大小在样式中是不可控的，比如要想使得背景图填充满某个区域，你要么重新做帐大点的图，要么就只能让它以平铺的方式来填充。

　　如今background-size让你既可以直接缩放背景图来填充满这个区域，也可以让你先给背景图设置大小，然后以设置好的尺寸去平铺满这个区域。

　　一起来认识认识background-size吧。

　　background-size的值类型：

　　background-size需要1个或2个值，这些值既可以是像素px，也可以是百分比%或auto，还可以是特定值cover, contain。

　　background-size的值定义：

　　background-size可以设置2个值，1个为必填，1个为可选。
　　其中第1个值用于指定背景图的width，第2个值用于指定背景图的height，如果只给background-size设置1个值，则第2个值默认为auto（cover和contain特定值除外）。

div{
   background-image:url(test.png);
   background-repeat:no-repeat;
   background-size:100px;
}

　　等价于：

div{
   background-image:url(test.png);
   background-repeat:no-repeat;
   background-size:100px auto;
}

　　查看具体DEMO: background-size的值定义。当你使用firebug抓取到那个实例节点时，你会发现第二个值被自动加上了并且值为auto。当然，你也可以手动将第2个值设置为auto，然后与该DEMO的实例对比，它们的效果将是相同的。

　　background-size的特定值：

1. cover: 保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域；
2. contain: 保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域；

cover值：

div{
   background-image:url(test.png);
   background-repeat:no-repeat;
   background-size:cover;
}

　　上例，背景图片将覆盖整个div区域。查看具体DEMO: background-size:cover。

contain值：

div{
   background-image:url(test.png);
   background-repeat:no-repeat;
   background-size:contain;
}

　　上例，背景图将缩放到宽度或高度的任意一边与div区域适应。查看具体DEMO: background-size:contain。

 　　background-size简单的应用示例：

1. 背景图自适应容器大小
2. 设置背景图大小与平铺

　　如果尚未对CSS3有一定的了解，相信你还会为要给同一个元素设置多个背景图而头痛。于是就衍生出一些使用伪对象来实现的解决方案，如使用:first-letter，:first-line，:befor，:after等；又或是使用多个无意义标记堆叠来实现；又或是其它的什么方法。

　　当然，方法没有错误，有的只是寻求最适合和最简单的。

　　相信在CSS3 multiple background-image尚未出现之前，亦没有人会说自己的某某方法是最佳的，有的只是满足需求的一些变通方案（即使是在现在这种CSS3尚未被所有浏览器支持的情况下，是否要在项目中使用multiple background-image，也是你必须要考虑的问题)。

　　所谓有需求就会有变化，也许正是基于这样或那样的考虑，background-image终于将多背景图纳入了自己势力的范围之内。

　　有之前使用background-image的经验，多背景图对于你来说，完全是锦上添花，你甚至都不必花更多的时间去了解它，因为多背景图与之前的单一背景图并无大的区别，让我么来看看简单的DEMO吧：css3 multiple background-image多组背景图。

　　两者的细微区别：

• 单一背景图语法：background-image:url();
• 多重背景图语法：background-image:url(),url(),url()...

　　你会发现多背景图只是在单一背景图的基础上，多添加一层背景图，就多设置一个url()，每个url()之间以半角逗号分隔。这种方式应该很常见了，比如说多字体间的间隔，不也正是这样么。

　　组合与拆分写法：

组合：

.test{
    background:url(1.jpg) no-repeat,url(2.jpg) no-repeat 25px 25px,url(3.jpg) no-repeat 50px 50px;
}

拆分：

.test{
    background-image:url(1.jpg),url(2.jpg),url(3.jpg);
    background-repeat:no-repeat;
    background-position:0 0,25px 25px,50px 50px;
}

　　如上组合与拆分这两种写法是等效的，依据实际情况使用适合的写法。拆分写法中的background-repeat:no-repeat之所以可以缩写成这样，是因为该示例代码中的3个背景的平铺方式都为no-repeat。完整代码为： background-repeat:no-repeat,no-repeat,no-repeat;

　　值得注意的地方：

　　如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。DEMO请看这里：多背景图之间的层叠关系。

　　如果存在着可比性的话，那么这个情况与元素的z-index正好相反，z-index默认下后者会覆盖前者，当然，其实这2者间不存在可比性，只是都有覆盖的情况，顺带一提。

　　“有了新盖中盖高钙片，一片顶过去五片，高钙片，水果味，一个片嘣五楼，不费劲儿！”

　　这句广告词估计大家都早已烂熟于胸，多年的狂轰乱炸，想记不住也是不可能的。比起新盖中盖高钙片广告词中的神效，CSS3 RGBA之与RGB又或HEX，应该可以对等。

 　　为什么要这么说？想想不使用CSS3，我们一直是如何满足“背景透明，文字（内容）不透明”这种需求的？

　　例如现在有个需求：

1. 有个长300px，高100px的div在body为红色的页面中；
2. 该div拥有不透明度为50%的黑色背景颜色；
3. 该div内容不允许出现半透明效果，且文字为白色。

　　根据该需求中的3点要求，我们需要得出的效果应如下图：

　　
　　Figure 1: 背景透明内容不透明

根据需求里的已知条件，我们代码如下：

body{
    background:#f00;
}
#opacity{
    width:400px;
    height:100px;
    background-color:#000;
    color:#fff;
    filter:alpha(opacity=50);     /* For IE */
    opacity:.5;
}

<div id="opacity">怎样实现背景透明，内容不透明？</div>

 　　运行这段代码后，效果与需求3不符合，内容也随着容器成了半透明的，看DEMO：不成功的背景透明内容不透明效果。其效果如下图：

　　
　　Figure 2: 内容也半透明了

　　有经验的前端工程师知道，要达到需求所述的效果，上面的代码需要做些许变动：

1. 如果仅需满足IE，那么在原有的结构上加多一层，并将其设置为position:relative。示例DEMO：only ie的背景透明内容不透明效果。
2. 兼容大部分浏览器的处理方式：这也需要加多一层，不过要与原结构“同级”。示例DEMO：兼容大部分浏览器的背景透明内容不透明效果。

　　以上2中方式，其中only ie的自然是不可取的，因为这是前端工程师的职责所在，我们必须使得大部分用户能得到相同的体验，而不仅仅是某个范围。

　　至于第二种，这是现在比较流行的处理方式。不过这种方式也不是那么完美，这个缺憾表现在：

1. 代码量增加：需加多额外一层无意义标签；与此同时，相应的CSS代码也将增加
2. 不灵活：由于新增的一层与内容层是并级的，所以新增层的宽高不能动态的随着内容层的中内容的增减而变化。

　　这个时候CSS3 RGBA的优势就体现出来了，从字面看，RGBA = RGB + alpha。但事实上RGBA并不是简单的RGB与alpha的相加。请看例子CSS3 RGBA color详解中几种颜色类型的对比。

　　我们知道opacity（IE下用filter:alpha(opacity=??)）是让整个元素渲染成半透明的效果，而不能单独指定是否只有颜色为半透明。我想这也许正是RGBA和HSLA这种类型颜色的出现原因。

　　RGBA的语法非常简单，如果你熟悉RGB颜色话。

　　rgba(0-255,0-255,0-255,0-1) 这就是RGBA的语法，前三个参数为色调，取值可在0-255之间，第四个参数则为alpha，取值为0-1之间。

以上面的需求第2点为例，用RGBA可以这样表示

background-color:rgba(0,0,0,.5);

　　这样就只有背景色为半透明，其它的俱不受影响。最大的问题被轻松搞定，那整个需求即变得异常简单起来，迟疑什么？立即看看用CSS3 RGBA实现的背景透明内容不透明效果DEMO吧。而之前在第二种实现方案中所提及的2个缺憾，在RGBA的实现方案中，似乎根本不存在。

　　DEMO看完后，相信你也能体会到RGBA这种颜色类型的强大力量。CSS3离你还远吗？

　　与圆角border-radius属性一样，盒阴影box-shadow也是一个令人激动的属性。

　　W3C将box-shadow加入CSS3属性列表，并使其标准化，应该是件值得高兴的事。也许，从此你再也不会因为“实现代价”而与设计师争得脸红。

　　那么，box-shadow究竟是如何被人们所称道的？

　　如果你是前端工程师，你可能有过这些痛苦的经历：

1. 面对到处都是圆角的设计稿；
2. 面对到处都是圆角+阴影的设计稿；
3. 面对到处都是圆角+阴影+半透明的设计稿。

　　如果你还没有接触过CSS3，或者你所负责的这个项目，必须兼容IE系列。那么，无论是面对上面的哪一点，都可以耗费你不少的精力和时间。

　　这里，我们搁下IE不谈，只谈谈box-shadow。

　　box-shadow属性至多有6个参数可以设置：

1. 阴影水平偏移量：如果该参数为正值，则阴影在box的右边；如果该参数为负，则阴影在box的左边
2. 阴影垂直偏移量：如果该参数为正值，则阴影在box的底部；反之，则在box顶部
3. 阴影模糊距离（大小）：此参数可选，只能是正值。如果该参数值为0，则阴影的边缘犀利；该值越大，阴影的边缘越模糊
4. 阴影扩展距离：此参数可选。如果该参数为正，则整个阴影都延展扩大；反之，则缩小。
5. 阴影颜色：此参数可选。如果不写，则会选取默认颜色。至于默认颜色会是什么，不清楚（在webkit核心下为无色，即透明），建议不要省略该值。
6. 阴影类型：此参数可选。有唯一值‘inset’，如果存在该值，那么阴影将为内阴影；如果不写该值，则为缺省的外阴影。

　　box-shadow的特征：

1. 通过对阴影偏移量的设置，可以使得阴影出现在“上、右、下、左”任一方向；
2. 阴影大小、边缘模糊、颜色可自定义；
3. 可设置内阴影及外阴影；
4. 可设置“多组”阴影。

　　box-shadow实例：

　　来实现一个最基本的阴影的效果，如下图：

　　
　　Figure 1: 基本阴影效果

　　就是这样的一个具有最简单阴影的效果，如果不用box-shadow做，那么要实现的话，也必要再多堆叠一层无实质意义的标签。

再来看看box-shadow的代码实现：

box-shadow:5px 5px #888;background:#eee;

　　该实例的DEMO展示：simple box-shadow。同时，可以通过对偏移量数值的更改以查看其它的效果，实现特征1所述效果。

如果，你想要得到一个内阴影的效果，只需在上诉代码中加上一个'inset'即可：

box-shadow:5px 5px #888 inset;background:#eee;

　　经此一改，效果立即变成：

　　
　　Figure 2: 内阴影效果

　　至于阴影出现的方向，仍然可以通过对偏移量的更改来控制，看看DEMO：内阴影

　　通过box-shadow，阴影的实现是如此的方便；而圆角也一如本文开头所说，用border-radius也可轻松搞定。如果你对CSS3中圆角的实现不大了解，请看： CSS3 border-radius圆角的优雅实现。

　　如此一来，开篇所述的3大痛苦经历，前2大已经变得那么微不足道了。如果把半透明阴影也搞定了，那3大痛苦经历似乎也不再那么纠结了。

　　那么半透明阴影有解么？是的，有，而且异常简单。

　　你或许已经听说过RGBA colors与HSLA colors，没听说过也无妨，CSS3为了让半透明的实现更简单，新增了RGBA和HSLA这样的颜色属性。相比于RGB，RGBA多了一个‘A’，而这个A正是alpha（透明度）的缩写。这样的组合要告诉我们的是，CSS3允许你使用一个可以调节透明度的颜色。

　　我们看看半透明阴影与普通阴影的对比DEMO：半透明阴影。

　　一个小应用：

　　曾惊艳于Chrome与Safari的文本框聚焦效果，却也不甚欢喜其实现的繁杂。

　　
　　Figure 3: Safari下常态文本框

　　
　　Figure 4: Safari下获取焦点的文本框

　　如今，对着如Figure 4的效果，你可以微笑着说：“这个，简单！”

　　不信，我们可以一起去看看DEMO：文本框聚焦效果。

　　得益于CSS3，现如今边框（border）也颇具可玩性了。它正在慢慢摆脱只能设置纯色，只能是规规矩矩的矩形的约束，穿上一件华彩的外衣。

　　当然，无图无真相，只说不做难以令人信服。那就先上个图吧。

　　
　　Figure 1: 自适应大小的边框

　　相信类似Figure 1图示的效果，大家都不会陌生。并且，很多人为做类似的效果还颇费了一番功夫。css sprites自是不必多说，肯定是要用到的，为了实现它，同时还要“绑架“好些个标签。是不是有人要说，我只要一个标签照样可以实现？我想说，若不借力于CSS3，你做不到，因为需求是这个边框会随着内容的大小改变而改变，而并非大小固定。

　　那CSS3真的可以用”1个标签“实现类似的效果吗？如果能，怎么做呢？

　　答案是肯定的，你且过来看DEMO 1：border-image自适应大小的边框。至于实现方式，请听我慢慢道来：

　　首先，我们这个华丽的外框，我们还是需要用图片来做的，所以我们提供这样一个图片：

　
　　Figure 2: 边框图片

　　是的，你没看错，就是Figure 2这么一张小图，我们就能实现Figure 1的效果，并且可以让它想大就大，想小就小，如有怀疑，你可以在DEMO 1里去修改图片的大小试试。

　　第二，你需要了解CSS3的新特性border-image，因为我们需要借助的就是它。

　　初看到border-image，很多人会马上想起background-image。确实，它们之间有一些类似之处，其中包括对图片的引用及图片排列方式。

　　如同background般，border-image也是多值的，所以可以对它进行形式上的属性分解：

1. border-image-source
2. border-image-slice
3. border-image-width
4. border-image-repeat

　　border-image-source用来引入图片，格式与background-image一致：

1. 写法：border-image-source:url(image URL)

　　border-image-slice用来分解引入的图片，将之拆解成9份，形成一个九宫格造型。参见：W3C borer-image-slice。

1. 写法：border-image-slice:10 10 10 10；
2. 方位：跟如margin,padding等属性一样，这4个数值所对应的方位仍然是“上、右、下、左”；
3. 处理：如上面的代码其实可缩写成border-image-slice:10 10，或者进一步缩写成border-image-slice:10，这点可以参照margin等属性，其对数值的处理方式是相同的。
4. 单位：你会发现这4个数值均无单位，其实这些数字已被固定单位为px了，所以不必写上，如果加了单位就错了；当然，也可以用百分比来设置这些数值。

　　border-image-width用来指定border的width，为边框图片的显示提供地方；

1. 写法：border-image-width:10px 10px 10px 10px；
2. 处理：数字的处理方式如margin,padding等属性。

　　border-image-repeat用来指定边框图片的排列方式；

1. 拉伸写法：border-image-repeat:stretch stretch; 参见DEMO 2: stretch拉伸方式
2. 重复写法：border-image-repeat:repeat repeat; 参见DEMO3: repeat重复方式
3. 平铺写法：border-image-repeat:round round; 参见DEMO4: round平铺方式
4. 语法：border-image-repeat可以指定2个值，分别表示水平方向和垂直方向；当水平和垂直方向的排列方式相同时，可以将2个值合并写成1个，同时由于该属性的默认值为stretch，所以当水平和垂直方向均为stretch时，可以省略不写；当然2个方向可以使用不同的排列方式，参见DEMO 5: 混合方式。

　　上面我们说过，对border-image的属性拆分只是形式上的，用于帮助理解每个参数的意思。实际在应用的时候，是不能拆分的，必须是缩写在一起，如：

　　border-image:url(xx.png) 10/10px stretch stretch;

　　按本文对border-image-repeat的语法里所说，上面代码其实可以简写成：

　　border-image:url(xx.png) 10/10px stretch;

　　或者：

　　border-image:url(xx.png) 10/10px;

　　第三：了解各浏览器对CSS3的支持程度。这也是我一直想说的，既然是讲CSS3，大家在看的时候，或者在练习的时候，总不至于还会说：IE下怎么没效果啊，某某浏览器怎么不是这样的啊（我在每个DEMO里都已注明浏览器版本参照基准和支持程度）。同时，这里也不讨论CSS3还要多久可以普及，IE什么时候可以被推到，我们只是去尝尝鲜而已，看看新技术的发展方向。

　　一口气说完“第三”点这么长的一句话后，忽然想起还有一个地方需要跟大家说说：

　　border-image-width，对，这个是定义边框width的，用来为边框图片的显示提供地方，这点前面已经说了。遗漏没说的是，对于边框width的定义以前还有一个border-width可以做到。在这里也不例外，你可以使用border-wdith代替border-image-width的定义，参见DEMO 6: border-image-width之与border-width。如果这样的话，那么上面的代码则可写成：

　　border-width:10px;
border-image:url(xx.png) 10;

　　最后：一起写个小例子看看吧

　　弄清楚上面这些后，让我们来做个小东西试试：我们暂且只拿一张简陋的草图来做我们的border-image。写这样一句代码：

　　border-image:url(xx.png) 5 8 5 10/5px 8px 5px 10px repeat stretch;

　　那么，解析这句代码就会得到：这张“草图”，实际上会先被分解成如下图般的1，2，3，4，A，B，C，D，E 9个部分。1，2，3，4不参与border-image-repeat(排列方式)；A，B，C，D，E5部分，其中AC为参与水平方向的 border-image-repeat（即代码里的repeat），BD参与垂直方向的border-image-repeat（即代码里的 stretch），E同时参与水平和垂直2种排列方式（即水平方向repeat，垂直方向stretch）。

　　Figure 3: 边框图分解

　　顺便看看这个小例子的实现吧：DEMO 7

　　了解了这些，还犹豫什么，找一张COOL点的图来代替Figure 3，试着为你的border穿起华丽的衣裳吧。

　　初看标题，你可能还反应不过来什么是“双线框”。没关系，因为这个叫法可能只是我“杜撰”的，或许它有其它的叫法，不过不必深究。

　　我想，如果有张图来让你看到什么是我所谓的“双线框”，那么，接下来应该可以让你我的距离拉近一些。

　　
　　Figure 1: 常规双线框

　　有了Figure 1的图示，估计很多人已想到了实现该图效果的方法。是的，就算没有CSS3，实现这样的效果也是信手拈来。

　　其实，看到double border这样的字眼，应该就会想到，border-style（在CSS1中已实现，故所有现代浏览器均支持）有个double参数值。double所表现出来的效果就是如Figure 1般：2条有间隔（你所看到的这个白色间隔并不是1根白色的线条，而是真正的缝隙）的线条。

　　需要说明的是：border-style的double参数值需要border-width在不小于3px的情况下使用，2条线条与之间的间隔之和等于border-width的值。

我们来看看Figure 1的border-style实现（Code 1）：

.test{
	border:3px double #000;
}
<div class="test">double border</div>

　　你可以试着将Code 1的3px进行修改，会发现，2条线条和间隔，这3者总是自动去对这个值进行分配，所以无法有针对的指定对2条线条和间隔的width。也就是说，你无法实现2条1px的线条夹着1个3px的间隔，也无法实现2条3px的线条夹着1个1px的间隔。

　　当然，上面所说的这点，并不是最纠结的问题。真正影响实际应用的问题在于：

1. 无法为2根线条指定不同的颜色；
2. 无法单独为这个间隔指定背景色；
3. 无法只保留外边框而去掉内边框。

　　也就是说你可以通过Code 1的方法去实现Figure 1，并且也能实现如下列的Figure 2和Figure 3。

　　
　　Figure 2: 带背景色的双线框

　　
　　Figure 3: 背景色不包括border的双线框

　　但却做不到如下列的Figure 4，Figure 5，Figure 6。

　　
　　Figure 4: 2条线条颜色不同的双线框

　　
　　Figure 5: 间隔设置了颜色的双线框

　　
　　Figure 6: 去掉了内边框的双线框

　　自然，如Figure 7的常见效果就无法做到了。

　　
　　Figure 7: 常见双线框效果

　　既然标题是CSS3 VS. CSS1，那么CSS1的实现方法已经有了，我们再看看CSS3的实现方式吧。很简单，我们要用到的正是我之前所写文章“CSS3 border-colors创建惊艳多重边框色“中的多重边框色：border-colors。

　　也就是说，只需要多每组的颜色进行一些设置，就可以实现border-style方案所纠结的问题。但这种方法也存在着瓶颈，因为当前并非所有浏览器都对CSS3支持良好。

　　看看DEMO：css3 double border双线框效果的2种实现方式。你可以在该DEMO内的border-colors方法里修改一些颜色和边框的宽度，就能实现从Figure 1到Figure 6，至于Figure 7，只是背景色由纯色变成了渐变色而已。如果你了解CSS3的gradient属性，这个也很容易实现。如果不了解，就让我们下次再说说gradient吧。