因为近期项目没有压力，主要工作就是一些涉及功能增删相关的界面的小工作，修修补补，搞个图标之类，设计师小伙伴们都懂的，很轻松，基本就是比着葫芦画瓢这样，所以有时间的话就会看看CSS3的相关知识，自己也在边学边做，并无限感慨CSS3真是太强大了，几乎可以完全告别“切图”时代，web UI和移动端UI都应该掌握一些CSS的知识并在实际项目中用起来，毕竟，吓一吓开发人员也是好的。

这里多插播一句，其实国内的UI真的要求不算太高，这也是大家一直喊着“门槛低”的原因，好消息是，入门是很容易的，坏消息是，在行业如此饱和的状态下，不尽快提高自己的技能，小心前端的开发人员过来抢饭碗哦，尤其在UI插件库越来越丰富以及美观的情况下，具有一定审美水准的前端转UI简直分分钟的事。在国外，web UI设计师要会Html，会CSS以及会JavaScript。Html和CSS比较简单，学起来也不难，还是零基础的UI要抓紧了，不要让自己处于可有可无的地位，JavaScript是锦上添花，我是在对svg动画很感兴趣的情况下发现离开JavaScript的svg动画真的很难发挥它的强大，所以强迫自己看完了一本入门的书，我对自己要求不高，不用会写（JavaScript高深莫测），在控制一些动画的节点时知道怎么用就可以，这是题外话，不说了，这里，要重点说一下CSS3究竟都实现了哪些你想象不到的效果并奉上代码以供复用。代码有些是我的存货，也有些是我自己写的。另外，这篇只讲样式，以后会继续补充CSS3之动画篇。

看到这里，没有任何CSS基础的设计师先不要离开，因为有两个强大的工具可以帮你，一个是最熟悉不过的photoshop，另外一个是在线CSS3工具，有了这两个工具在手，真是走遍天下都不愁，噢哈哈。

CSS样式的优势

CSS实现的样式到底比切图好在哪里？还有很多古老的ie浏览器连CSS2.1都不能完全支持，切图则不用考虑这么多，那为何还要尽量用代码来实现效果呢？理由很简单，便于系统的优化以及维护。此外，还避免了拉伸变形等等各种问题，再具体深入的，可以买杯咖啡贿赂一下前端攻城狮，让他们给你系统的梳理一下知识体系，我这里只举个简单的例子。

1.相同样式不同尺寸的按钮.jpg

如果你的界面里需要的按钮是上面这种多个规格，有大有小，准备怎么办？如果每个规格还有各种宽度不一的尺寸怎么办？撸起袖子开始切图嘛？或许设计师会不服气的说，我的界面设计中怎么可能出现这种杂乱无章的设计？？另外现在不是扁平化了嘛，直接丢给开发人员按钮底色色值就可以，谁还搞这种又落后又老土的立体质感按钮啊？如果这样想的设计师，远走不送，和你无法正常玩耍，神烦把“扁平化”挂在嘴边的UI，这不是你偷懒的理由，另外扁平化扁平化，那种单色色块的扁平化时代早就结束了好嘛，你看手淘都改版渐变色的风格了。

2.相似样式不同颜色的按钮.jpg

又或者上面这种（原谅我又是立体按钮，我们的客户就是喜欢这种，以至于我的审美也被带偏了）你设计了按钮需要好几套色值，或者老板不喜欢，PM不喜欢你的配色等等，要换，怎么办？再切图？或许你又要说了，我在ps里调个色相也很简单嘛，调个妹！这种样式对于CSS3而言，只需要修改一个色值就可以了，当然了，对于这个案例，由于用的是hsla的表示方法，更是简单到只要改下h值就好了。要几套颜色？十套！没问题，给我三分钟我给你集齐七个葫芦娃+七个小矮人+七龙珠，哪种好维护？不言而喻。

3不同圆角半径的按钮.jpg

还有，还有，上面那个例子继续，领导说，圆角矩形太中规中矩了，全部改了，改成直角的样式比较硬汉，哦哦，不不，改成胶囊样式，比较潮流，哦哦，不不，还是圆角矩形吧，改的再圆滑一点。改改改，你在ps里面忙到人仰马翻，但css来说，只要改一下圆角半径border-radius的值。

CSS3实现的样式基础部分

其实CSS3可实现的样式UI需要了解的无外乎两种，按钮样式和背景样式，文本也用，但用的比较少，但特效还是很炫的，再具体一下，渐变、投影、阴影。看到这里，设计师们有没有感觉很熟悉，不错，就是你的看家本领photoshop的图层样式，也是你在做按钮时会用到的选项。
因为这篇不讲动画，所以按钮的动效先略过去，可以放到css3动画里一并讲，我们来看一下按钮会用到的属性。

4.按钮的样式设置.jpg

先随便画一枚按钮图标，丑是丑了点，为了对应CSS的属性，先凑合看吧。我给这枚按钮加了描边、渐变、投影，并设置了各种参数，这也是CSS3实现样式的三个基本属性，其他都可以在此基础上进行叠加变换。我把photoshop图层样式截图放上，把颜色单独标注出来，方便下面和CSS3属性值对应。
然后photoshop图层右键-“复制CSS代码”，我把代码贴到下面看一下：

border: 4px solid #59C5D5;
background-image: -moz-linear-gradient(top, #52A5BD, #92ECFF);
background-image: -webkit-linear-gradient(top, #52A5BD, #92ECFF);
background-image: linear-gradient(to bottom, #52A5BD, #92ECFF);
box-shadow: 0 9px 10px 7px #00181A;

background-image重复出现了3次，属性值那里加了各种前缀，这个不用管它，是浏览器的兼容性，做过web的设计师应该没少听前端开发人员念叨“兼容性”这个词。另外插播一句，不用担心你做的样式浏览器实现不了，前端攻城狮有很好的工具来自动兼容各种浏览器版本，比如Modernizr，即使古老的ie版本也能平稳退化，你交付给开发人员的代码文件可以全部copy给他/她，也可以直接给一个没有任何前缀的，比如background-image: linear-gradient(to bottom, #52A5BD, #92ECFF);这种，再加上效果图，足够说明问题。
看完代码和样式的对应，应该有一个概念了：

border属性对应图层样式的描边，大小和颜色就不用说了。
background-image linear-gradient(to bottom, #52A5BD, #92ECFF);对应渐变（线性）叠加。
box-shadow对应投影，距离、扩展和大小值都有体现。

那真正浏览器中实现的效果怎么样呢？来看下面这张图片（遗憾，ps的生成CSS代码功能非常有限，圆角大小是我直接代码写进去的）：

5.photoshop与浏览器按钮样式对比.jpg

最大的问题一目了然，投影太黑了！这是为什么呢？回头再看我们的ps里面的设置，给了投影不透明度22%，而在代码中并没有体现，不要紧，这只是因为photoshop毕竟是图像处理软件，所以附带的生成CSS代码和SVG代码功能还是比较弱的。我们来把box-shadow中表示投影颜色的#00181A改成RGBA（0,24,26,0.22），然后再看一下效果：

6.修改后浏览器下按钮的样式.jpg

是不是几乎100%还原了我们在photoshop中的设计。十六进制表示方法#00181A和RGB（0,24,26）等值，RGBA的A是透明度alpha的意思，所以RGBA（0,24,26,0.22）A设置成0.22就对应了我们ps里的投影的不透明度。

上面说的是CSS3最最基础的实现按钮样式的属性，有了按钮底图了，还要有文本对不对？我随便打上两个字，给文本加上距离和大小为1px的50%透明度的白色投影，同样，右键-复制CSS，得到代码如下：

color: #094658;
font: 400 60px 'Source Han Sans CN';
text-align: justifyLeft;
text-shadow: 0 1px 1px #FFFFFF;

color是文本的色值，不用管它，font里的属性值有字重、字号和字体，也不用管，因为这些你最好体现在设计文档的标注中，文本对齐的text-align的属性更不用管了，因为即使开发人员拿到这个代码也不能用，我们只关心text-shadow，也就是文本的投影属性，同样，与按钮的投影一样，它少了透明度值，所以得到的效果是下面这种：

7.文本投影差异对比.jpg

直接改#FFFFFF为RGBA（255,255,255,0.5）就得到了和photoshop相同的效果。另外，请记住这个text-shadow的用法，这是CSS3中最常用的文本的一个效果，其他特效下面会说到，但用到的确实很少。

按钮可以玩出的花样1-图层样式的叠加

设计师都知道，在photoshop中描边、内阴影、渐变叠加、投影是支持N多个样式进行叠加的，我们强大的CSS3同样可以达到这种效果。
先来说内阴影，我们已经得到了图层样式与CSS3属性的对应，并没有内阴影，那就无法实现了吗？不，来把按钮的box-shadow属性增加一句，改成下面这种：

box-shadow: inset 0 2px 0 0 rgba(255,255,255,0.5), 0 10px 10px 0px rgba(0,24,26,0.22);

来看一下效果：

8.内阴影实现的高光效果.jpg

那道我们喜欢称之为蜜汁高光的部分已然出现。“逗号,”可以连接一个属性值的多个设定，其实具体的语法不用掌握，知道能实现，然后给开发人员建一个文本文档，把所有要叠加的属性值的设定写清楚就可以了。

那么我们来想想，还有什么样式最常用呢？外发光！还是上面的按钮，为了清楚一些，我在图层样式中去掉深色的底部投影，加上一个外发光效果，就来个柔和的浅蓝色的外发光吧，代码我依旧来改box-shadow属性，如下：

box-shadow: inset 0  2px 0 0 rgba(255,255,255,0.5), 0 0 20px 0px rgba(0,228,255,0.5);

来看一下浏览器的效果：

9.外发光效果.jpg

为什么box-shadow承担了如此多的样式？这和四个属性值对应水平偏移、垂直偏移、模糊、大小有关，并通过inset来确定效果是内部还是外部，所以水平偏移0，垂直偏移10px对应的就是投影且角度是90度，而水平和垂直偏移都是0，则四周都有投影，也就对应了外发光效果。

同理，可以进行进一步的延伸，内阴影的话加上inset就可以了。

总结一下，图层样式和CSS属性对应如下：
投影↔box-shadow 垂直偏移不为0；
描边↔border（这个不是很重要，直接体现在界面标注中也可以）；
渐变叠加↔background-image（不止线性渐变，角度渐变、径向渐变都支持，还能图案叠加，很少用，不多说）；
内阴影↔box-shadow: inset & 垂直偏移不为0；
外发光↔box-shadow 垂直水平偏移均为0；
内发光↔box-shadow ：inset & 垂直水平偏移均为0。

除上述要掌握的之外，还涉及到CSS3属性值设定中通过水平偏移产生的角度和图层样式值设定的各种对应（eg.水平偏移=垂直偏移，则投影角度45度，水平偏移为赋值，则向左下角投影），情况太多，不一一说明，大家可以自行尝试。好了，那么完全没有html代码基础的设计师同学要问了，怎么才能看到浏览器对应的效果？不要着急，以下几个在线CSS3工具亲测好用，可以直接看到效果。（当然，最推荐的还是codepen，不解释）怕大家被墙，推荐一个国内的CSS3样式生成器-Css3演示http://www.css88.com/tool/css3Preview/ ，包含最基础的样式
http://www.colorzilla.com/gradient-editor/ ，有一些现成的样式可以直接拿来使用
以及http://enjoycss.com/，一个全面的CSS3在线生成器。

按钮可以玩出的花样2-另一种描边的实现

这个方法UI可以不用掌握，但个人建议用如下box-shadow的设置来实现描边，好处的话，可以和前端多探讨一下，说白了，就是变相实现描边效果，甭管描边多粗，不占实际空间。另外还能根据box-shadow属性的叠加来实现多重描边。想内描就加上inset值，否则就外描，我把上面那个图标去掉描边属性，多叠加几个box-shadow看一下。
代码如下：

  box-shadow: inset 0  2px 0 0 rgba(255,255,255,0.5),/*高光样式*/ 
  0px 0px 0px 4px #59c5d5,/*第一层描边*/
  0px 0px 0px 8px #e0fbff,/*第二层描边*/
  0px 0px 0px 12px #29a5b7,/*第三层描边*/
  0px 0px 0px 16px #59c5d5,/*第四层描边*/
  0px 0px 0px 20px #0c5a70;/*第五层描边*/

效果如下：

10.多重描边.jpg

炫不炫，炫不炫，你就说炫不炫！好吧，不嘚瑟了，其实真正使用的时候，一层就好了。

按钮可以玩出的花样3-加噪点或纹理

加噪点这个功能可以让按钮怎么滴来着？对！呈现质感。我喜欢质感这个词，体现我们的设计水平！去他的扁平化，哈哈。我给按钮的background-image加上以下一堆莫名其妙的代码:

background-image: url(data:image/png;base64,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),
linear-gradient(to top, #52A5BD, #92ecff);

11.噪点效果.jpg

然后按钮华丽变身，看这细腻的质感，啧啧啧，那噪点纹理，就是上面那一堆代码完成的效果。好了，该来说一下实现的原理和方法了。首先，用ps做一个噪点纹理的透明背景的png图片，噪点的颜色就是你准备实现的给按钮增加的颜色。不用太大，对于按钮来说，50*50即可，后面会说明不能太大的原因，具体的方法UI设计师自己看着来，增加杂色也行，我偏爱用Camera Raw滤镜的颗粒效果。还有一些在线的工具，也很简易好用，推荐一个http://www.noisetexturegenerator.com/
这种直接调节透明度和密度能看到效果的甚至比我们自己制作更加来的高效。

然后，你需要一个工具来把生成的这个透明背景的噪点图片转成DataURI编码，在这里解释一下，使用DataURI的优势官方解释如下：当图片的体积太小，占用一个HTTP会话不是很值得时。 算了，我也看不懂，我理解的大概意思就是通过CSS样式文件实现重复背景的加载优化，避免小的背景图片单独请求一次HTTP，而且虽然浏览器不缓存该图片，但可以和CSS文件一起被浏览器缓存起来。好吧好吧，再简化一下，就是只要是很小的图片实现的重复背景都可以把二进制格式图片转成这种base64编码字符串。关于转换的工具网上一搜一大把，随便来一个，比如 http://tool.c7sky.com/datauri/ 。
然后生成的这一堆鬼一样的代码就可以扔进我们的background-image: url()里了。

12.噪点图片的制作（或在线生成）及转码.png

看了上面这些，你会大吼，好麻烦，劳资是设计！设计！不是码农！嗯，那我们来折中一下，可以把噪点背景图给前端，告诉一下需要加上这个噪点背景（什么，你不早说？？！！）。但既然学CSS3，我们就要尽量接触一点点前沿的东西嘛，（严肃，严肃）。另外很认真的说，如果是想加斜线背景这种3*3就可以搞定的重复背景，用DataURI编码确实很合适。好学的UI设计师们也可以让前端给解释一下减少请求http次数是为了毛。还有如果是纯色的话，gif比png更合适。就像我用下面这一句代码

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB1JREFUeNpiYGBgaPj//z8DCEMIqAADXBQoABBgAIHOE29IPWyQAAAAAElFTkSuQmCC),

13.斜线纹理.png

就实现了斜线纹理效果。

按钮可以玩出的花样4-不规则形状

先放上按钮一枚（我做案例的这个太丑了，借用前面的按钮的样式）

14.不规则按钮.png

之前也以为按钮嘛，循规蹈矩就好，直到有一天，我看到了上面这枚图标，居然有一种很“妖艳”的美丽，而实现又非常简单，无非是单独设置每个角的圆角半径(依次顺序：上右下左)。

border-radius: 120px 24px 120px 24px;

关于不规则按钮，在使用的时候慎之又慎，因为你看，如果我拿做案例的图标也搞个这样的出来，如下：

15.谨慎使用不规则形状按钮.png

小李飞刀，咻，咻！所以，除非真的需要，这种技能掌握就行，轻易不要尝试。

按钮可以玩出的花样5-为通用样式努力

如果CSS3能实现样式仅仅是上面这种，那么你或许会说改改大小还好，改颜色的话也不是很方便嘛，需要在代码中把所有的色值换一遍。那CSS3样式就可以进入进阶阶段了，怎么才能发挥这么强大的属性。
我们来先看一个图标的CSS代码：

.btn{border-radius: 10px;    
     background-image:linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.1));
     box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),
                 inset 0 2px 0 hsla(0,0%,100%,.1),
                 inset 0 30px 0 hsla(0,0%,100%,0.05),
                 inset 0 -4px 0 hsla(0,0%,100%,.1),
                 inset 0 -5px 0 hsla(0,0%,0%,.25),
                 0 4px 4px hsla(0,0%,0%,.05);}

然后我们在phtoshop里面还原一下这个样式，前面我们提到了RGBA表示有透明度的色值，这只是一种表示方法，CSS3同时支持hsla，HSB的颜色表示方法对于UI来说应该不陌生，但hsl和hsb的色相h值相同，s和l分别代表纯度和亮度，最后的a表示透明度，hsla表示方法最大的优势是对于一组颜色而言，s和l相同表示同样的饱和度和亮度，颜色的改变只是色相H的变化，更加方便微妙调色，如果你对hsl色彩模型熟悉的话，就会知道hsl优于rgb，说多就跑题了，在这个案例中，我们只需要了解hsl(0,0%,0%)是黑色，hsl(0,0%,100%)是白色。从上到下，依次为渐变叠加（0.05白→0.1黑），内发光（1px,0.2黑），内阴影（2px,0.2白），内阴影（30px，0.05白），内阴影（4px，0.1白，-90度），内阴影（5px，0.25黑，-90度），投影（距离4px,大小4px,0.05黑）。

16.CSS代码对应的photoshop图层样式.png

那实现的是什么效果呢，我们来把填充改成0看一下：

17.CSS代码对应的photoshop图层样式.png

就是这个浅灰色的外壳，现在你把填充色随意改成自己喜欢的颜色看一下效果，对于我这种配色渣渣，自然要求助现成的配色方案了，我得到的结果如下：

18.样式通用的按钮组.png

那这种代码实现的效果为什么更有优势呢？因为当样式表中再定义一下填充色，不同按钮每次同时调用通用样式btn和自定义的背景色就可以实现各种效果了，而且非常统一。而且每次更换颜色时，只要改一个色值就能实现。

.darkblue {background-color: #1c3462;}
.lightblue{background-color: #778fb5;}
.lightbrown{background-color: #d4c3c9;}
.red{background-color: #d67a7f;}
.orange{background-color: #ffaea0;}

通用CSS样式实现要求尽量用纯白纯黑的透明度改变来实现各种效果，不要引入其他颜色，而把颜色作为背景色单独定义。

CSS3实现的背景样式

其实有了上面的基础，对于背景样式的实现严格来说是按钮样式的分支，和按钮背景的实现是一样的，但玩法更多，我们来看下面几个案例：

19.CSS3实现的各种背景.png

是的，你没有看错，这些都是CSS3实现的背景效果，是不是感觉不！敢！相！信！，我拿很喜欢的第一个案例拆解来看，知道了原理之后你也可以做出这么逆天的背景来。这个充满了田园风情的小方格CSS样式代码如下（又是hsla表示方法，想在ps中还原模型的话可以借助http://gavin-yyc.github.io/colorconvert/ 进行在线颜色转换，HSL→RGB）：

background-color: hsl(34, 53%, 82%);
background-image: repeating-linear-gradient(45deg,  transparent 5px, 
hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,                  
hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,                
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px ),
repeating-linear-gradient(135deg, transparent 5px, 
hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, 
 hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
 hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,                
hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px );

代码有点多，不过不可怕，用庖丁解牛的精神，我们来一步步的分析。
先引入一个小知识点，关于重复背景填充，如果是渐变重复的话，有两种实现途径：
一种途径是background-image: repeating-linear-gradient直译过来就是重复渐变平铺。
另外一种途径是background-image:linear-gradient();background-size: 直译过来就是建一个渐变填充的单元格，background-size决定单元格的尺寸，用这个单元格来填充画布。
我们上面案例用的就是第一个——重复渐变平铺。
我们的样式代码分成两部分，一个是背景色的填充，一个是两个角度渐变的叠加，分别是45deg和135deg。关于角度渐变，大家记住一点，不加任何角度的话都是垂直从上到下的渐变，然后角度值为逆时针旋转相应度数。对于这个案例，两个角度方向如下图所示：

20.角度渐变方向图示.png

了解过角度之后来看条纹效果是如何实现的，这里的一个知识点是当一个颜色的起始点与上一个颜色的结束点重合时，无渐变效果，大家就想象成和ps里渐变两个色标的重叠。你如果能在ps渐变里实现条纹渐变，那么就能更好的理解这个语法了。但案例中的代码并不是最好的表示方法，我在后面会贴上自己改进后的更加容易读懂的代码。CSS渐变语法里每个色值等同于ps的色标，色值后面的数值表示色标的位置，只是CSS比photoshop更灵活，支持百分比表示也支持具体是数值表示。transparent 5px, 表示透明色从0开始，到5px结束,hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, 表示透明度0.5的深蓝（hsl（197, 62%, 11%）代表的颜色）从5px开始到10px结束，依次解读。
暂时不考虑角度，我在ps里做出了对应的条纹（高度140），下图中红色框标出的即第一个渐变生成的条纹效果。

21.第一个渐变效果.png

同理，做出第二个渐变，由于和第一个渐变夹角是90度，所以这个渐变做成水平效果（宽度160）。如下图所示：

22.第二个渐变效果.png

现在我们把两个渐变叠加在一起，并加上背景色，得到了下面的图：

23.基础效果.png

现在再来看案例的效果，就非常好理解了，相当于这个效果水平重复，垂直重复，最后效果逆时针旋转旋转45度。

刚才说过要优化这个代码，是因为里面一些hsla（）a为0就是透明色值，另外CSS3支持一个语法为：如果某个颜色过渡点位置小于之前过渡点，那该过渡点的位置重置为所有在它前面的颜色过渡点的最大位置。 简而言之，对于任何一个为了与上一个颜色结束点保持相同位置的色值的位置都可以直接写成0，这种表示方法有个好处，就是每当你看到渐变有(color 0, color 数值)这种表示方法，都表示一个实色条。另外雷锋了一把，帮大家把hsla表示方法直接转换成了rgba的表示方法，优化后的代码如下：

body{
background-color: rgb(233,212,184);
background-image: repeating-linear-gradient(45deg, transparent 5px,
rgba(10,35,45,0.5) 0, rgba(10,35,45,0.5) 10px, 
transparent 0, transparent 35px, 
rgba(210,118,110, 0.5) 0, rgba(210,118,110, 0.5) 40px,
rgba(10,35,45,0.5) 0, rgba(10,35,45,0.5) 50px, 
transparent 0, transparent 60px, 
rgba(210,118,110, 0.5) 0, rgba(210,118,110, 0.5) 70px, 
rgba(246,179,84, 0.5) 0, rgba(246,179,84, 0.5) 80px, 
transparent 0, transparent 90px, 
rgba(210,118,110, 0.5) 0, rgba(210,118,110, 0.5) 110px,
transparent 0, transparent 120px, 
rgba(10,35,45,0.5) 0, rgba(10,35,45,0.5) 140px ), 
repeating-linear-gradient(135deg, transparent 5px, 
rgba(10,35,45,0.5) 0, rgba(10,35,45,0.5) 10px, 
transparent 0, transparent 35px, 
rgba(210,118,110, 0.5) 0, rgba(210,118,110, 0.5) 40px,
rgba(10,35,45,0.5) 0, rgba(10,35,45,0.5) 50px, 
transparent 0, transparent 60px,                
rgba(210,118,110, 0.5) 0, rgba(210,118,110, 0.5) 70px, 
rgba(246,179,84, 0.5) 0, rgba(246,179,84, 0.5) 80px,
transparent 0, transparent 90px, 
rgba(210,118,110, 0.5) 0, rgba(210,118,110, 0.5) 110px,
transparent 0, transparent 140px, 
rgba(10,35,45,0.5) 0, rgba(10,35,45,0.5) 160px );
height: 100vh;
}

大家可以把这段代码丢到一个html页面里看一下效果。
如果使用repeating-linear-gradient来进行整个body背景的填充，请务必加上height:100vh;即高度为视窗高度，否则你会看到支离破碎无法解释的效果。
关于另外一种重复背景填充的方法，关键在于如何把重复单元格转换成CSS3样式，举个最简单的例子，给背景画格子，水平垂直间距均为50，线宽2px，效果如下：

24.格子背景.png

那只要找出最小重复单元格就可以了：

25.最小重复单元格.png

那我们的CSS代码主要是画一道白色水平线，一道白色垂直线，叠加在粉色背景上，对应代码如下：
background-color:#ff90ba;
background-image: linear-gradient(white 2px, transparent 2px),
linear-gradient(90deg, white 2px, transparent 2px);
background-size:50px 50px;
当然了，由于这个效果在实际应用过程中是白边开始的，比较丑一些，可以通过设置背景偏移值或者重新规划单元格的方法来加以改进。聪明的设计师小伙伴要活学活用哟。具体效果可以先在ps里面新建一个图案，然后用图案填充画布就能够看到了，和浏览器效果完全一致。

关于径向渐变，被拿来最多是用作实现波点效果，我们来看下面这张图片

26.波点背景.png

我做了两种波点，有大有小，但仔细看，边缘都存在严重的像素化，所以要提的一点是：径向渐变效果尽量不要用来做实色圆点，浏览器渲染出来的圆形非常不圆滑，这个可以用svg来实现，效果更好。拿灰底白色圆点为例，放上代码来看一下。

background: radial-gradient(circle, white 10%, transparent 10%),
            radial-gradient(circle, white 10%, transparent 10%) 50px 50px;
background-color:gray;
background-size: 100px 100px;

有了前面的实现无渐变的实色条纹的基础，再理解就容易一些了。如同线性渐变不定义角度默认从上到下的渐变一样，对于径向渐变而言，不定义圆心位置会默认在画布（或单元格）的中心，第一个径向渐变radial-gradient(circle, white 10%, transparent 10%)在100px*100px的画布中心生成了一个白色圆点，既然最终背景效果是交错分布的波点，那我们需要另外一个大小相同，位置错开的径向渐变生成的白色圆点，错开的水平和垂直距离均是50px，用CSS语言解读就是圆心位置的移动（使用笛卡尔坐标系，向右向下为正）。
另外插入一个小知识点，上面径向渐变叠加时我用了简单的写法background，而不是background-image，这样是可以的，但这时如果把background-color:gray; 放到background之前，那我们的灰色背景就会失效，简单来说，我们的CSS文件在被执行时，遇到background会把前面所有背景相关的属性一概清空，所以为了不出错，以后在使用背景各种属性时，尽量不要采用简写。

一定切记，虽然CSS3强大到没朋友，但对于一些图形的重复，你需要使用的是svg背景填充，而不是利用css3变换来实现各种图形，CSS3最常用的背景是条纹图。总之，掌握的知识越多，你用的时候就越有选择的余地，我们的终极目的是快速高效的完成最终效果而不是炫技。

CSS3的背景混合模式

27.不同background-blend-mode值对应的效果.png

看，我们只需要定义一种背景样式，就得到了这么多的效果，其实这个属性用的最多的不是这种，而是引用的背景图片和颜色的叠加，自行研究，不懂的留言。

背景的混合模式只适用于background-color和background-image的叠加。

CSS3实现的文字特效1——3D立体字

文字的特效在实际使用中很少，但有几个还不错的效果我把代码贴上共享，3D立体字这个，就是靠一层层的投影进行叠加。

28.投影实现的3D立体字.png

text-shadow:0px 1px 0px #c7c8ca, 0px 2px 0px #b1b3b6, 0px 3px 0px #9d9fa2, 0px 4px 0px #8a8c8e, 0px 5px 0px #77787b, 0px 6px 0px #636466, 0px 7px 0px #4d4d4f, 0px 8px 7px #001135;
color:#FFF;
background-color:#ebece8

在photoshop里做这种3D立体字的投影步骤如下（因为实在太多啦，截图截到手软，所以我每隔一个跳跃进行）

29.3D立体字实现过程.png

一定注意多个投影效果叠加的顺序，CSS3与photoshop相同，从前到后即从上到下。在用这种立体效果时，字号越大越粗越漂酿，字体最好是无衬线体。

本来还有一个很棒的长投影的效果，但用CSS3写的话写到吐血，有多恐怖呢，我贴一点点代码感受一下：

text-shadow: 0 0 0 rgb(196,80,78) , 
1px 1px 0 rgb(196,80,78) , 
2px 2px 0 rgb(196,80,78) , 
3px 3px 0 rgb(196,80,78) , 
4px 4px 0 rgb(196,80,78) ,
此处省略5-49中间所有, 
50px 50px 0 rgba(196,80,78,0) ;

但前端攻城狮们都知道这个用scss预处理框架就简单多了，这里就不说了，设计师小伙伴只要知道长投影用CSS3也能实现就可以了，而且还可以实现渐变长投影。

CSS3实现的文字特效2——图案填充

这个特效用的就更少了，只做为简单补充，就拿咱们上面做的灰色底白色小圆点的波点效果来说，如果我想用这个效果来填充文本怎么办？关于文本可没有什么text-background属性之类的，（不过随着CSS的发展，不好说CSS4的话万一真的就有这样的属性呢，噢哈哈），曲线救国的方针来了，这里需要了解两个属性-webkit-background-clip: text; -webkit-text-fill-color: transparent;第一个是背景剪切，属性值定义为text意味着把背景剪切进文本，然后把文本的填充色去掉，也就是我们第二个属性-webkit-text-fill-color文字的填充属性，定义成透明，就实现了背景填充文本效果，来感受一下：

30.波点效果填充文字.png

background: radial-gradient(circle, white 5px, transparent 5px),radial-gradient(circle, white 5px, transparent 5px) 25px 25px;
background-color:gray;
background-size: 50px 50px;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;

前缀-webkit-是表示私有属性。
关于文字特效还有很多，但迄今为止，除了在按钮上用过文本效果的突出和凹陷，还没用过其他文字特效，所以嘛，了解就可以了，一旦需要使用，知道有CSS3可以实现，咱们就不用切图了对不对。

想象力很重要

设计离不开思考，在使用CSS3的时候也是如此。基础只是入门，要得到各种效果，需要研究各种图层叠加效果，就像那些神一样的渐变。

“奇技淫巧”说了一堆，其实UI重要的依然是对产品的理解能力和审美构图能力，我自己也弱成渣渣，才会靠这种旁门左道来提升自我价值，不会CSS难道就不是好的UI了嘛，设计大牛出来理直气壮的说：“才不会！”，哈哈。但不容置疑的是，掌握CSS会让你的设计加分，也会让开发人员摆脱对你的“代码小白”的印象。好吧好吧，不扯了，其实是给我们设计人员自己偷懒用的。另外，既然选择做了UI，就要让自己脱离平面设计的思维，更多的去探索软件表现层下面的东西，也就是样式层面，甚至了解结构层，才会在UI的路上深入的走下去。

总结一下这篇文章的几个知识点：
photoshop图层样式与CSS3属性的对应
Data URL的使用
CSS3样式叠加产生的各种效果（重点是渐变生成条纹）
CSS3支持背景的混合效果
一些特殊的应用：3D立体字体，填充文字等等

关于样式方面，如果掌握上面这些全部，对于UI设计师来说，应该基本差不多了，最后友情提示，如果你跑得太快，前端没跟上（不排除存在这种情况），请尊重他们，他们说不会用或者实现不了的时候（不过CSS3样式的话应该不至于，以后CSS3动画就很难说了），请按他们说的来，毕竟，UI设计师请记住，你做的永远只是效果图。

大家在使用CSS3样式效果中有任何疑问也可以给我留言，最近在总结CSS3的样式相关方面的知识，会尽量解答，共同进步。（以上浏览器效果均为Chrome下效果，其他不管不听不问）