因?yàn)榻陧?xiàng)目沒有壓力，主要工作就是一些涉及功能增刪相關(guān)的界面的小工作，修修補(bǔ)補(bǔ)，搞個(gè)圖標(biāo)之類，設(shè)計(jì)師小伙伴們都懂的，很輕松，基本就是比著葫蘆畫瓢這樣，所以有時(shí)間的話就會(huì)看看CSS3的相關(guān)知識(shí)，自己也在邊學(xué)邊做，并無限感慨CSS3真是太強(qiáng)大了，幾乎可以完全告別“切圖”時(shí)代，web UI和移動(dòng)端UI都應(yīng)該掌握一些CSS的知識(shí)并在實(shí)際項(xiàng)目中用起來，畢竟，嚇一嚇開發(fā)人員也是好的。
這里多插播一句，其實(shí)國內(nèi)的UI真的要求不算太高，這也是大家一直喊著“門檻低”的原因，好消息是，入門是很容易的，壞消息是，在行業(yè)如此飽和的狀態(tài)下，不盡快提高自己的技能，小心前端的開發(fā)人員過來搶飯碗哦，尤其在UI插件庫越來越豐富以及美觀的情況下，具有一定審美水準(zhǔn)的前端轉(zhuǎn)UI簡直分分鐘的事。在國外，web UI設(shè)計(jì)師要會(huì)Html，會(huì)CSS以及會(huì)JavaScript。Html和CSS比較簡單，學(xué)起來也不難，還是零基礎(chǔ)的UI要抓緊了，不要讓自己處于可有可無的地位，JavaScript是錦上添花，我是在對svg動(dòng)畫很感興趣的情況下發(fā)現(xiàn)離開JavaScript的svg動(dòng)畫真的很難發(fā)揮它的強(qiáng)大，所以強(qiáng)迫自己看完了一本入門的書，我對自己要求不高，不用會(huì)寫（JavaScript高深莫測），在控制一些動(dòng)畫的節(jié)點(diǎn)時(shí)知道怎么用就可以，這是題外話，不說了，這里，要重點(diǎn)說一下CSS3究竟都實(shí)現(xiàn)了哪些你想象不到的效果并奉上代碼以供復(fù)用。代碼有些是我的存貨，也有些是我自己寫的。另外，這篇只講樣式，以后會(huì)繼續(xù)補(bǔ)充CSS3之動(dòng)畫篇。
看到這里，沒有任何CSS基礎(chǔ)的設(shè)計(jì)師先不要離開，因?yàn)橛袃蓚€(gè)強(qiáng)大的工具可以幫你，一個(gè)是最熟悉不過的photoshop，另外一個(gè)是在線CSS3工具，有了這兩個(gè)工具在手，真是走遍天下都不愁，噢哈哈。
CSS樣式的優(yōu)勢#
CSS實(shí)現(xiàn)的樣式到底比切圖好在哪里？還有很多古老的ie瀏覽器連CSS2.1都不能完全支持，切圖則不用考慮這么多，那為何還要盡量用代碼來實(shí)現(xiàn)效果呢？理由很簡單，便于系統(tǒng)的優(yōu)化以及維護(hù)。此外，還避免了拉伸變形等等各種問題，再具體深入的，可以買杯咖啡賄賂一下前端攻城獅，讓他們給你系統(tǒng)的梳理一下知識(shí)體系，我這里只舉個(gè)簡單的例子。
如果你的界面里需要的按鈕是上面這種多個(gè)規(guī)格，有大有小，準(zhǔn)備怎么辦？如果每個(gè)規(guī)格還有各種寬度不一的尺寸怎么辦？擼起袖子開始切圖嘛？或許設(shè)計(jì)師會(huì)不服氣的說，我的界面設(shè)計(jì)中怎么可能出現(xiàn)這種雜亂無章的設(shè)計(jì)？？另外現(xiàn)在不是扁平化了嘛，直接丟給開發(fā)人員按鈕底色色值就可以，誰還搞這種又落后又老土的立體質(zhì)感按鈕啊？如果這樣想的設(shè)計(jì)師，遠(yuǎn)走不送，和你無法正常玩耍，神煩把“扁平化”掛在嘴邊的UI，這不是你偷懶的理由，另外扁平化扁平化，那種單色色塊的扁平化時(shí)代早就結(jié)束了好嘛，你看手淘都改版漸變色的風(fēng)格了。
又或者上面這種（原諒我又是立體按鈕，我們的客戶就是喜歡這種，以至于我的審美也被帶偏了）你設(shè)計(jì)了按鈕需要好幾套色值，或者老板不喜歡，PM不喜歡你的配色等等，要換，怎么辦？再切圖？或許你又要說了，我在ps里調(diào)個(gè)色相也很簡單嘛，調(diào)個(gè)妹！這種樣式對于CSS3而言，只需要修改一個(gè)色值就可以了，當(dāng)然了，對于這個(gè)案例，由于用的是hsla的表示方法，更是簡單到只要改下h值就好了。要幾套顏色？十套！沒問題，給我三分鐘我給你集齊七個(gè)葫蘆娃+七個(gè)小矮人+七龍珠，哪種好維護(hù)？不言而喻。
還有，還有，上面那個(gè)例子繼續(xù)，領(lǐng)導(dǎo)說，圓角矩形太中規(guī)中矩了，全部改了，改成直角的樣式比較硬漢，哦哦，不不，改成膠囊樣式，比較潮流，哦哦，不不，還是圓角矩形吧，改的再圓滑一點(diǎn)。改改改，你在ps里面忙到人仰馬翻，但css來說，只要改一下圓角半徑border-radius的值。
CSS3實(shí)現(xiàn)的樣式基礎(chǔ)部分#
其實(shí)CSS3可實(shí)現(xiàn)的樣式UI需要了解的無外乎兩種，按鈕樣式和背景樣式，文本也用，但用的比較少，但特效還是很炫的，再具體一下，漸變、投影、陰影。看到這里，設(shè)計(jì)師們有沒有感覺很熟悉，不錯(cuò)，就是你的看家本領(lǐng)photoshop的圖層樣式，也是你在做按鈕時(shí)會(huì)用到的選項(xiàng)。
因?yàn)檫@篇不講動(dòng)畫，所以按鈕的動(dòng)效先略過去，可以放到css3動(dòng)畫里一并講，我們來看一下按鈕會(huì)用到的屬性。
先隨便畫一枚按鈕圖標(biāo)，丑是丑了點(diǎn)，為了對應(yīng)CSS的屬性，先湊合看吧。我給這枚按鈕加了描邊、漸變、投影，并設(shè)置了各種參數(shù)，這也是CSS3實(shí)現(xiàn)樣式的三個(gè)基本屬性，其他都可以在此基礎(chǔ)上進(jìn)行疊加變換。我把photoshop圖層樣式截圖放上，把顏色單獨(dú)標(biāo)注出來，方便下面和CSS3屬性值對應(yīng)。
然后photoshop圖層右鍵-“復(fù)制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重復(fù)出現(xiàn)了3次，屬性值那里加了各種前綴，這個(gè)不用管它，是瀏覽器的兼容性，做過web的設(shè)計(jì)師應(yīng)該沒少聽前端開發(fā)人員念叨“兼容性”這個(gè)詞。另外插播一句，不用擔(dān)心你做的樣式瀏覽器實(shí)現(xiàn)不了，前端攻城獅有很好的工具來自動(dòng)兼容各種瀏覽器版本，比如Modernizr，即使古老的ie版本也能平穩(wěn)退化，你交付給開發(fā)人員的代碼文件可以全部copy給他/她，也可以直接給一個(gè)沒有任何前綴的，比如background-image: linear-gradient(to bottom, #52A5BD, #92ECFF);這種，再加上效果圖，足夠說明問題。
看完代碼和樣式的對應(yīng)，應(yīng)該有一個(gè)概念了：
border屬性對應(yīng)圖層樣式的描邊，大小和顏色就不用說了。
background-image linear-gradient(to bottom, #52A5BD, #92ECFF);對應(yīng)漸變（線性）疊加。
box-shadow對應(yīng)投影，距離、擴(kuò)展和大小值都有體現(xiàn)。
那真正瀏覽器中實(shí)現(xiàn)的效果怎么樣呢？來看下面這張圖片（遺憾，ps的生成CSS代碼功能非常有限，圓角大小是我直接代碼寫進(jìn)去的）：
最大的問題一目了然，投影太黑了！這是為什么呢？回頭再看我們的ps里面的設(shè)置，給了投影不透明度22%，而在代碼中并沒有體現(xiàn)，不要緊，這只是因?yàn)閜hotoshop畢竟是圖像處理軟件，所以附帶的生成CSS代碼和SVG代碼功能還是比較弱的。我們來把box-shadow中表示投影顏色的#00181A改成RGBA（0,24,26,0.22），然后再看一下效果：
是不是幾乎100%還原了我們在photoshop中的設(shè)計(jì)。十六進(jìn)制表示方法#00181A和RGB（0,24,26）等值，RGBA的A是透明度alpha的意思，所以RGBA（0,24,26,0.22）A設(shè)置成0.22就對應(yīng)了我們ps里的投影的不透明度。
上面說的是CSS3最最基礎(chǔ)的實(shí)現(xiàn)按鈕樣式的屬性，有了按鈕底圖了，還要有文本對不對？我隨便打上兩個(gè)字，給文本加上距離和大小為1px的50%透明度的白色投影，同樣，右鍵-復(fù)制CSS，得到代碼如下：
color: #094658;
font: 400 60px 'Source Han Sans CN';
text-align: justifyLeft;
text-shadow: 0 1px 1px #FFFFFF;
color是文本的色值，不用管它，font里的屬性值有字重、字號(hào)和字體，也不用管，因?yàn)檫@些你最好體現(xiàn)在設(shè)計(jì)文檔的標(biāo)注中，文本對齊的text-align的屬性更不用管了，因?yàn)榧词归_發(fā)人員拿到這個(gè)代碼也不能用，我們只關(guān)心text-shadow，也就是文本的投影屬性，同樣，與按鈕的投影一樣，它少了透明度值，所以得到的效果是下面這種：
直接改#FFFFFF為RGBA（255,255,255,0.5）就得到了和photoshop相同的效果。另外，請記住這個(gè)text-shadow的用法，這是CSS3中最常用的文本的一個(gè)效果，其他特效下面會(huì)說到，但用到的確實(shí)很少。
按鈕可以玩出的花樣1-圖層樣式的疊加##
設(shè)計(jì)師都知道，在photoshop中描邊、內(nèi)陰影、漸變疊加、投影是支持N多個(gè)樣式進(jìn)行疊加的，我們強(qiáng)大的CSS3同樣可以達(dá)到這種效果。
先來說內(nèi)陰影，我們已經(jīng)得到了圖層樣式與CSS3屬性的對應(yīng)，并沒有內(nèi)陰影，那就無法實(shí)現(xiàn)了嗎？不，來把按鈕的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);
來看一下效果：
那道我們喜歡稱之為蜜汁高光的部分已然出現(xiàn)。“逗號(hào),”可以連接一個(gè)屬性值的多個(gè)設(shè)定，其實(shí)具體的語法不用掌握，知道能實(shí)現(xiàn)，然后給開發(fā)人員建一個(gè)文本文檔，把所有要疊加的屬性值的設(shè)定寫清楚就可以了。
那么我們來想想，還有什么樣式最常用呢？外發(fā)光！還是上面的按鈕，為了清楚一些，我在圖層樣式中去掉深色的底部投影，加上一個(gè)外發(fā)光效果，就來個(gè)柔和的淺藍(lán)色的外發(fā)光吧，代碼我依舊來改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);
來看一下瀏覽器的效果：
為什么box-shadow承擔(dān)了如此多的樣式？這和四個(gè)屬性值對應(yīng)水平偏移、垂直偏移、模糊、大小有關(guān)，并通過inset來確定效果是內(nèi)部還是外部，所以水平偏移0，垂直偏移10px對應(yīng)的就是投影且角度是90度，而水平和垂直偏移都是0，則四周都有投影，也就對應(yīng)了外發(fā)光效果。
同理，可以進(jìn)行進(jìn)一步的延伸，內(nèi)陰影的話加上inset就可以了。
總結(jié)一下，圖層樣式和CSS屬性對應(yīng)如下：
投影?box-shadow 垂直偏移不為0；
描邊?border（這個(gè)不是很重要，直接體現(xiàn)在界面標(biāo)注中也可以）；
漸變疊加?background-image（不止線性漸變，角度漸變、徑向漸變都支持，還能圖案疊加，很少用，不多說）；
內(nèi)陰影?box-shadow: inset & 垂直偏移不為0；
外發(fā)光?box-shadow 垂直水平偏移均為0；
內(nèi)發(fā)光?box-shadow ：inset & 垂直水平偏移均為0。
除上述要掌握的之外，還涉及到CSS3屬性值設(shè)定中通過水平偏移產(chǎn)生的角度和圖層樣式值設(shè)定的各種對應(yīng)（eg.水平偏移=垂直偏移，則投影角度45度，水平偏移為賦值，則向左下角投影），情況太多，不一一說明，大家可以自行嘗試。好了，那么完全沒有html代碼基礎(chǔ)的設(shè)計(jì)師同學(xué)要問了，怎么才能看到瀏覽器對應(yīng)的效果？不要著急，以下幾個(gè)在線CSS3工具親測好用，可以直接看到效果。（當(dāng)然，最推薦的還是codepen，不解釋）怕大家被墻，推薦一個(gè)國內(nèi)的CSS3樣式生成器-Css3演示http://www.css88.com/tool/css3Preview/ ，包含最基礎(chǔ)的樣式
http://www.colorzilla.com/gradient-editor/ ，有一些現(xiàn)成的樣式可以直接拿來使用
以及http://enjoycss.com/， 一個(gè)全面的CSS3在線生成器。
按鈕可以玩出的花樣2-另一種描邊的實(shí)現(xiàn)##
這個(gè)方法UI可以不用掌握，但個(gè)人建議用如下box-shadow的設(shè)置來實(shí)現(xiàn)描邊，好處的話，可以和前端多探討一下，說白了，就是變相實(shí)現(xiàn)描邊效果，甭管描邊多粗，不占實(shí)際空間。另外還能根據(jù)box-shadow屬性的疊加來實(shí)現(xiàn)多重描邊。想內(nèi)描就加上inset值，否則就外描，我把上面那個(gè)圖標(biāo)去掉描邊屬性，多疊加幾個(gè)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;/*第五層描邊*/
效果如下：
炫不炫，炫不炫，你就說炫不炫！好吧，不嘚瑟了，其實(shí)真正使用的時(shí)候，一層就好了。
按鈕可以玩出的花樣3-加噪點(diǎn)或紋理##
加噪點(diǎn)這個(gè)功能可以讓按鈕怎么滴來著？對！呈現(xiàn)質(zhì)感。我喜歡質(zhì)感這個(gè)詞，體現(xiàn)我們的設(shè)計(jì)水平！去他的扁平化，哈哈。我給按鈕的background-image加上以下一堆莫名其妙的代碼:
background-image: url(data:image/png;base64,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),
linear-gradient(to top, #52A5BD, #92ecff);
然后按鈕華麗變身，看這細(xì)膩的質(zhì)感，嘖嘖嘖，那噪點(diǎn)紋理，就是上面那一堆代碼完成的效果。好了，該來說一下實(shí)現(xiàn)的原理和方法了。首先，用ps做一個(gè)噪點(diǎn)紋理的透明背景的png圖片，噪點(diǎn)的顏色就是你準(zhǔn)備實(shí)現(xiàn)的給按鈕增加的顏色。不用太大，對于按鈕來說，50*50即可，后面會(huì)說明不能太大的原因，具體的方法UI設(shè)計(jì)師自己看著來，增加雜色也行，我偏愛用Camera Raw濾鏡的顆粒效果。還有一些在線的工具，也很簡易好用，推薦一個(gè)http://www.noisetexturegenerator.com/
這種直接調(diào)節(jié)透明度和密度能看到效果的甚至比我們自己制作更加來的高效。
然后，你需要一個(gè)工具來把生成的這個(gè)透明背景的噪點(diǎn)圖片轉(zhuǎn)成DataURI編碼，在這里解釋一下，使用DataURI的優(yōu)勢官方解釋如下：當(dāng)圖片的體積太小，占用一個(gè)HTTP會(huì)話不是很值得時(shí)。 算了，我也看不懂，我理解的大概意思就是通過CSS樣式文件實(shí)現(xiàn)重復(fù)背景的加載優(yōu)化，避免小的背景圖片單獨(dú)請求一次HTTP，而且雖然瀏覽器不緩存該圖片，但可以和CSS文件一起被瀏覽器緩存起來。好吧好吧，再簡化一下，就是只要是很小的圖片實(shí)現(xiàn)的重復(fù)背景都可以把二進(jìn)制格式圖片轉(zhuǎn)成這種base64編碼字符串。關(guān)于轉(zhuǎn)換的工具網(wǎng)上一搜一大把，隨便來一個(gè)，比如http://tool.c7sky.com/datauri/ 。
然后生成的這一堆鬼一樣的代碼就可以扔進(jìn)我們的background-image: url()里了。
看了上面這些，你會(huì)大吼，好麻煩，勞資是設(shè)計(jì)！設(shè)計(jì)！不是碼農(nóng)！嗯，那我們來折中一下，可以把噪點(diǎn)背景圖給前端，告訴一下需要加上這個(gè)噪點(diǎn)背景（什么，你不早說？？！！）。但既然學(xué)CSS3，我們就要盡量接觸一點(diǎn)點(diǎn)前沿的東西嘛，（嚴(yán)肅，嚴(yán)肅）。另外很認(rèn)真的說，如果是想加斜線背景這種3*3就可以搞定的重復(fù)背景，用DataURI編碼確實(shí)很合適。好學(xué)的UI設(shè)計(jì)師們也可以讓前端給解釋一下減少請求http次數(shù)是為了毛。還有如果是純色的話，gif比png更合適。就像我用下面這一句代碼
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB1JREFUeNpiYGBgaPj//z8DCEMIqAADXBQoABBgAIHOE29IPWyQAAAAAElFTkSuQmCC),
就實(shí)現(xiàn)了斜線紋理效果。
按鈕可以玩出的花樣4-不規(guī)則形狀##
先放上按鈕一枚（我做案例的這個(gè)太丑了，借用前面的按鈕的樣式）
之前也以為按鈕嘛，循規(guī)蹈矩就好，直到有一天，我看到了上面這枚圖標(biāo)，居然有一種很“妖艷”的美麗，而實(shí)現(xiàn)又非常簡單，無非是單獨(dú)設(shè)置每個(gè)角的圓角半徑(依次順序：上右下左)。
border-radius: 120px 24px 120px 24px;
關(guān)于不規(guī)則按鈕，在使用的時(shí)候慎之又慎，因?yàn)槟憧矗绻夷米霭咐膱D標(biāo)也搞個(gè)這樣的出來，如下：
小李飛刀，咻，咻！所以，除非真的需要，這種技能掌握就行，輕易不要嘗試。
按鈕可以玩出的花樣5-為通用樣式努力##
如果CSS3能實(shí)現(xiàn)樣式僅僅是上面這種，那么你或許會(huì)說改改大小還好，改顏色的話也不是很方便嘛，需要在代碼中把所有的色值換一遍。那CSS3樣式就可以進(jìn)入進(jìn)階階段了，怎么才能發(fā)揮這么強(qiáng)大的屬性。
我們來先看一個(gè)圖標(biāo)的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里面還原一下這個(gè)樣式，前面我們提到了RGBA表示有透明度的色值，這只是一種表示方法，CSS3同時(shí)支持hsla，HSB的顏色表示方法對于UI來說應(yīng)該不陌生，但hsl和hsb的色相h值相同，s和l分別代表純度和亮度，最后的a表示透明度，hsla表示方法最大的優(yōu)勢是對于一組顏色而言，s和l相同表示同樣的飽和度和亮度，顏色的改變只是色相H的變化，更加方便微妙調(diào)色，如果你對hsl色彩模型熟悉的話，就會(huì)知道hsl優(yōu)于rgb，說多就跑題了，在這個(gè)案例中，我們只需要了解hsl(0,0%,0%)是黑色，hsl(0,0%,100%)是白色。從上到下，依次為漸變疊加（0.05白→0.1黑），內(nèi)發(fā)光（1px,0.2黑），內(nèi)陰影（2px,0.2白），內(nèi)陰影（30px，0.05白），內(nèi)陰影（4px，0.1白，-90度），內(nèi)陰影（5px，0.25黑，-90度），投影（距離4px,大小4px,0.05黑）。
那實(shí)現(xiàn)的是什么效果呢，我們來把填充改成0看一下：
就是這個(gè)淺灰色的外殼，現(xiàn)在你把填充色隨意改成自己喜歡的顏色看一下效果，對于我這種配色渣渣，自然要求助現(xiàn)成的配色方案了，我得到的結(jié)果如下：
那這種代碼實(shí)現(xiàn)的效果為什么更有優(yōu)勢呢？因?yàn)楫?dāng)樣式表中再定義一下填充色，不同按鈕每次同時(shí)調(diào)用通用樣式btn和自定義的背景色就可以實(shí)現(xiàn)各種效果了，而且非常統(tǒng)一。而且每次更換顏色時(shí)，只要改一個(gè)色值就能實(shí)現(xiàn)。
.darkblue {background-color: #1c3462;}
.lightblue{background-color: #778fb5;}
.lightbrown{background-color: #d4c3c9;}
.red{background-color: #d67a7f;}
.orange{background-color: #ffaea0;}
通用CSS樣式實(shí)現(xiàn)要求盡量用純白純黑的透明度改變來實(shí)現(xiàn)各種效果，不要引入其他顏色，而把顏色作為背景色單獨(dú)定義。
CSS3實(shí)現(xiàn)的背景樣式#
其實(shí)有了上面的基礎(chǔ)，對于背景樣式的實(shí)現(xiàn)嚴(yán)格來說是按鈕樣式的分支，和按鈕背景的實(shí)現(xiàn)是一樣的，但玩法更多，我們來看下面幾個(gè)案例：
是的，你沒有看錯(cuò)，這些都是CSS3實(shí)現(xiàn)的背景效果，是不是感覺不！敢！相！信！，我拿很喜歡的第一個(gè)案例拆解來看，知道了原理之后你也可以做出這么逆天的背景來。這個(gè)充滿了田園風(fēng)情的小方格CSS樣式代碼如下（又是hsla表示方法，想在ps中還原模型的話可以借助http://gavin-yyc.github.io/colorconvert/ 進(jìn)行在線顏色轉(zhuǎn)換，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 );
代碼有點(diǎn)多，不過不可怕，用庖丁解牛的精神，我們來一步步的分析。
先引入一個(gè)小知識(shí)點(diǎn)，關(guān)于重復(fù)背景填充，如果是漸變重復(fù)的話，有兩種實(shí)現(xiàn)途徑：
一種途徑是background-image: repeating-linear-gradient直譯過來就是重復(fù)漸變平鋪。
另外一種途徑是background-image:linear-gradient();background-size: 直譯過來就是建一個(gè)漸變填充的單元格，background-size決定單元格的尺寸，用這個(gè)單元格來填充畫布。
我們上面案例用的就是第一個(gè)——重復(fù)漸變平鋪。
我們的樣式代碼分成兩部分，一個(gè)是背景色的填充，一個(gè)是兩個(gè)角度漸變的疊加，分別是45deg和135deg。關(guān)于角度漸變，大家記住一點(diǎn)，不加任何角度的話都是垂直從上到下的漸變，然后角度值為逆時(shí)針旋轉(zhuǎn)相應(yīng)度數(shù)。對于這個(gè)案例，兩個(gè)角度方向如下圖所示：
了解過角度之后來看條紋效果是如何實(shí)現(xiàn)的，這里的一個(gè)知識(shí)點(diǎn)是當(dāng)一個(gè)顏色的起始點(diǎn)與上一個(gè)顏色的結(jié)束點(diǎn)重合時(shí)，無漸變效果，大家就想象成和ps里漸變兩個(gè)色標(biāo)的重疊。你如果能在ps漸變里實(shí)現(xiàn)條紋漸變，那么就能更好的理解這個(gè)語法了。但案例中的代碼并不是最好的表示方法，我在后面會(huì)貼上自己改進(jìn)后的更加容易讀懂的代碼。CSS漸變語法里每個(gè)色值等同于ps的色標(biāo)，色值后面的數(shù)值表示色標(biāo)的位置，只是CSS比photoshop更靈活，支持百分比表示也支持具體是數(shù)值表示。transparent 5px, 表示透明色從0開始，到5px結(jié)束,hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, 表示透明度0.5的深藍(lán)（hsl（197, 62%, 11%）代表的顏色）從5px開始到10px結(jié)束，依次解讀。
暫時(shí)不考慮角度，我在ps里做出了對應(yīng)的條紋（高度140），下圖中紅色框標(biāo)出的即第一個(gè)漸變生成的條紋效果。
同理，做出第二個(gè)漸變，由于和第一個(gè)漸變夾角是90度，所以這個(gè)漸變做成水平效果（寬度160）。如下圖所示：
現(xiàn)在我們把兩個(gè)漸變疊加在一起，并加上背景色，得到了下面的圖：
現(xiàn)在再來看案例的效果，就非常好理解了，相當(dāng)于這個(gè)效果水平重復(fù)，垂直重復(fù)，最后效果逆時(shí)針旋轉(zhuǎn)旋轉(zhuǎn)45度。
剛才說過要優(yōu)化這個(gè)代碼，是因?yàn)槔锩嬉恍﹉sla（）a為0就是透明色值，另外CSS3支持一個(gè)語法為：如果某個(gè)顏色過渡點(diǎn)位置小于之前過渡點(diǎn)，那該過渡點(diǎn)的位置重置為所有在它前面的顏色過渡點(diǎn)的最大位置。 簡而言之，對于任何一個(gè)為了與上一個(gè)顏色結(jié)束點(diǎn)保持相同位置的色值的位置都可以直接寫成0，這種表示方法有個(gè)好處，就是每當(dāng)你看到漸變有(color 0, color 數(shù)值)這種表示方法，都表示一個(gè)實(shí)色條。 另外雷鋒了一把，幫大家把hsla表示方法直接轉(zhuǎn)換成了rgba的表示方法，優(yōu)化后的代碼如下：
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;
}
大家可以把這段代碼丟到一個(gè)html頁面里看一下效果。
如果使用repeating-linear-gradient來進(jìn)行整個(gè)body背景的填充，請務(wù)必加上height:100vh;即高度為視窗高度，否則你會(huì)看到支離破碎無法解釋的效果。
關(guān)于另外一種重復(fù)背景填充的方法，關(guān)鍵在于如何把重復(fù)單元格轉(zhuǎn)換成CSS3樣式，舉個(gè)最簡單的例子，給背景畫格子，水平垂直間距均為50，線寬2px，效果如下：
那只要找出最小重復(fù)單元格就可以了：
那我們的CSS代碼主要是畫一道白色水平線，一道白色垂直線，疊加在粉色背景上，對應(yīng)代碼如下：
background-color:#ff90ba;
background-image: linear-gradient(white 2px, transparent 2px),
linear-gradient(90deg, white 2px, transparent 2px);
background-size:50px 50px;
當(dāng)然了，由于這個(gè)效果在實(shí)際應(yīng)用過程中是白邊開始的，比較丑一些，可以通過設(shè)置背景偏移值或者重新規(guī)劃單元格的方法來加以改進(jìn)。聰明的設(shè)計(jì)師小伙伴要活學(xué)活用喲。具體效果可以先在ps里面新建一個(gè)圖案，然后用圖案填充畫布就能夠看到了，和瀏覽器效果完全一致。
關(guān)于徑向漸變，被拿來最多是用作實(shí)現(xiàn)波點(diǎn)效果，我們來看下面這張圖片
我做了兩種波點(diǎn)，有大有小，但仔細(xì)看，邊緣都存在嚴(yán)重的像素化，所以要提的一點(diǎn)是：徑向漸變效果盡量不要用來做實(shí)色圓點(diǎn)，瀏覽器渲染出來的圓形非常不圓滑，這個(gè)可以用svg來實(shí)現(xiàn)，效果更好。拿灰底白色圓點(diǎn)為例，放上代碼來看一下。
background: radial-gradient(circle, white 10%, transparent 10%),
radial-gradient(circle, white 10%, transparent 10%) 50px 50px;
background-color:gray;
background-size: 100px 100px;
有了前面的實(shí)現(xiàn)無漸變的實(shí)色條紋的基礎(chǔ)，再理解就容易一些了。如同線性漸變不定義角度默認(rèn)從上到下的漸變一樣，對于徑向漸變而言，不定義圓心位置會(huì)默認(rèn)在畫布（或單元格）的中心，第一個(gè)徑向漸變r(jià)adial-gradient(circle, white 10%, transparent 10%)在100px*100px的畫布中心生成了一個(gè)白色圓點(diǎn)，既然最終背景效果是交錯(cuò)分布的波點(diǎn)，那我們需要另外一個(gè)大小相同，位置錯(cuò)開的徑向漸變生成的白色圓點(diǎn)，錯(cuò)開的水平和垂直距離均是50px，用CSS語言解讀就是圓心位置的移動(dòng)（使用笛卡爾坐標(biāo)系，向右向下為正）。
另外插入一個(gè)小知識(shí)點(diǎn)，上面徑向漸變疊加時(shí)我用了簡單的寫法background，而不是background-image，這樣是可以的，但這時(shí)如果把background-color:gray; 放到background之前，那我們的灰色背景就會(huì)失效，簡單來說，我們的CSS文件在被執(zhí)行時(shí)，遇到background會(huì)把前面所有背景相關(guān)的屬性一概清空，所以為了不出錯(cuò)，以后在使用背景各種屬性時(shí)，盡量不要采用簡寫。
一定切記，雖然CSS3強(qiáng)大到?jīng)]朋友，但對于一些圖形的重復(fù)，你需要使用的是svg背景填充，而不是利用css3變換來實(shí)現(xiàn)各種圖形，CSS3最常用的背景是條紋圖。總之，掌握的知識(shí)越多，你用的時(shí)候就越有選擇的余地，我們的終極目的是快速高效的完成最終效果而不是炫技。
CSS3的背景混合模式#
你以為這樣就算完了？No!現(xiàn)在來了解一個(gè)CSS3的屬性，background-blend-mode，字面直譯，混合模式，什么，等等，混合模式，這莫不是photoshop圖層的混合模式？沒錯(cuò)，現(xiàn)在強(qiáng)大的CSS3也可以實(shí)現(xiàn)了，當(dāng)不定義的時(shí)候，是默認(rèn)為normal，它支持的屬性有multiply|正片疊底，screen|濾色，overlay|疊加，darken|變暗，lighten|變亮，color-dodge|顏色減淡，saturation|飽和度，color|顏色，luminosity|亮度。所以說嘛，作為UI設(shè)計(jì)師一定要學(xué)CSS嘛，你看，知識(shí)都是互通的對不對。
我們來拿上面我喜歡的那個(gè)田園風(fēng)格的條紋格子（有代表性，顏色多~）來看一下定義不同的background-blend-mode值時(shí)的效果。
看，我們只需要定義一種背景樣式，就得到了這么多的效果，其實(shí)這個(gè)屬性用的最多的不是這種，而是引用的背景圖片和顏色的疊加，自行研究，不懂的留言。
背景的混合模式只適用于background-color和background-image的疊加。
CSS3實(shí)現(xiàn)的文字特效1——3D立體字#
文字的特效在實(shí)際使用中很少，但有幾個(gè)還不錯(cuò)的效果我把代碼貼上共享，3D立體字這個(gè)，就是靠一層層的投影進(jìn)行疊加。
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立體字的投影步驟如下（因?yàn)閷?shí)在太多啦，截圖截到手軟，所以我每隔一個(gè)跳躍進(jìn)行）
一定注意多個(gè)投影效果疊加的順序，CSS3與photoshop相同，從前到后即從上到下。在用這種立體效果時(shí)，字號(hào)越大越粗越漂釀，字體最好是無襯線體。
本來還有一個(gè)很棒的長投影的效果，但用CSS3寫的話寫到吐血，有多恐怖呢，我貼一點(diǎn)點(diǎn)代碼感受一下：
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) ;
但前端攻城獅們都知道這個(gè)用scss預(yù)處理框架就簡單多了，這里就不說了，設(shè)計(jì)師小伙伴只要知道長投影用CSS3也能實(shí)現(xiàn)就可以了，而且還可以實(shí)現(xiàn)漸變長投影。
CSS3實(shí)現(xiàn)的文字特效2——圖案填充#
這個(gè)特效用的就更少了，只做為簡單補(bǔ)充，就拿咱們上面做的灰色底白色小圓點(diǎn)的波點(diǎn)效果來說，如果我想用這個(gè)效果來填充文本怎么辦？關(guān)于文本可沒有什么text-background屬性之類的，（不過隨著CSS的發(fā)展，不好說CSS4的話萬一真的就有這樣的屬性呢，噢哈哈），曲線救國的方針來了，這里需要了解兩個(gè)屬性-webkit-background-clip: text; -webkit-text-fill-color: transparent;第一個(gè)是背景剪切，屬性值定義為text意味著把背景剪切進(jìn)文本，然后把文本的填充色去掉，也就是我們第二個(gè)屬性-webkit-text-fill-color文字的填充屬性，定義成透明，就實(shí)現(xiàn)了背景填充文本效果，來感受一下：
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-是表示私有屬性。
關(guān)于文字特效還有很多，但迄今為止，除了在按鈕上用過文本效果的突出和凹陷，還沒用過其他文字特效，所以嘛，了解就可以了，一旦需要使用，知道有CSS3可以實(shí)現(xiàn)，咱們就不用切圖了對不對。
想象力很重要#
設(shè)計(jì)離不開思考，在使用CSS3的時(shí)候也是如此。基礎(chǔ)只是入門，要得到各種效果，需要研究各種圖層疊加效果，就像那些神一樣的漸變。
“奇技淫巧”說了一堆，其實(shí)UI重要的依然是對產(chǎn)品的理解能力和審美構(gòu)圖能力，我自己也弱成渣渣，才會(huì)靠這種旁門左道來提升自我價(jià)值，不會(huì)CSS難道就不是好的UI了嘛，設(shè)計(jì)大牛出來理直氣壯的說：“才不會(huì)！”，哈哈。但不容置疑的是，掌握CSS會(huì)讓你的設(shè)計(jì)加分，也會(huì)讓開發(fā)人員擺脫對你的“代碼小白”的印象。好吧好吧，不扯了，其實(shí)是給我們設(shè)計(jì)人員自己偷懶用的。另外，既然選擇做了UI，就要讓自己脫離平面設(shè)計(jì)的思維，更多的去探索軟件表現(xiàn)層下面的東西，也就是樣式層面，甚至了解結(jié)構(gòu)層，才會(huì)在UI的路上深入的走下去。
總結(jié)一下這篇文章的幾個(gè)知識(shí)點(diǎn)：
photoshop圖層樣式與CSS3屬性的對應(yīng)
Data URL的使用
CSS3樣式疊加產(chǎn)生的各種效果（重點(diǎn)是漸變生成條紋）
CSS3支持背景的混合效果
一些特殊的應(yīng)用：3D立體字體，填充文字等等
關(guān)于樣式方面，如果掌握上面這些全部，對于UI設(shè)計(jì)師來說，應(yīng)該基本差不多了，最后友情提示，如果你跑得太快，前端沒跟上（不排除存在這種情況），請尊重他們，他們說不會(huì)用或者實(shí)現(xiàn)不了的時(shí)候（不過CSS3樣式的話應(yīng)該不至于，以后CSS3動(dòng)畫就很難說了），請按他們說的來，畢竟，UI設(shè)計(jì)師請記住，你做的永遠(yuǎn)只是效果圖。
大家在使用CSS3樣式效果中有任何疑問也可以給我留言，最近在總結(jié)CSS3的樣式相關(guān)方面的知識(shí)，會(huì)盡量解答，共同進(jìn)步。（以上瀏覽器效果均為Chrome下效果，其他不管不聽不問）
