因?yàn)榻陧?xiàng)目沒有壓力，主要工作就是一些涉及功能增刪相關(guān)的界面的小工作革屠，修修補(bǔ)補(bǔ)凿试，搞個(gè)圖標(biāo)之類，設(shè)計(jì)師小伙伴們都懂的屠阻，很輕松红省，基本就是比著葫蘆畫瓢這樣额各，所以有時(shí)間的話就會看看CSS3的相關(guān)知識国觉，自己也在邊學(xué)邊做，并無限感慨CSS3真是太強(qiáng)大了虾啦，幾乎可以完全告別“切圖”時(shí)代麻诀，web UI和移動端UI都應(yīng)該掌握一些CSS的知識并在實(shí)際項(xiàng)目中用起來，畢竟傲醉，嚇一嚇開發(fā)人員也是好的蝇闭。
這里多插播一句，其實(shí)國內(nèi)的UI真的要求不算太高硬毕，這也是大家一直喊著“門檻低”的原因呻引，好消息是，入門是很容易的吐咳，壞消息是逻悠，在行業(yè)如此飽和的狀態(tài)下，不盡快提高自己的技能韭脊，小心前端的開發(fā)人員過來搶飯碗哦童谒，尤其在UI插件庫越來越豐富以及美觀的情況下，具有一定審美水準(zhǔn)的前端轉(zhuǎn)UI簡直分分鐘的事沪羔。在國外饥伊，web UI設(shè)計(jì)師要會Html，會CSS以及會JavaScript。Html和CSS比較簡單溉委，學(xué)起來也不難坊谁，還是零基礎(chǔ)的UI要抓緊了，不要讓自己處于可有可無的地位茫因，JavaScript是錦上添花，我是在對svg動畫很感興趣的情況下發(fā)現(xiàn)離開JavaScript的svg動畫真的很難發(fā)揮它的強(qiáng)大越除，所以強(qiáng)迫自己看完了一本入門的書节腐，我對自己要求不高外盯，不用會寫（JavaScript高深莫測），在控制一些動畫的節(jié)點(diǎn)時(shí)知道怎么用就可以翼雀，這是題外話饱苟，不說了，這里狼渊，要重點(diǎn)說一下CSS3究竟都實(shí)現(xiàn)了哪些你想象不到的效果并奉上代碼以供復(fù)用箱熬。代碼有些是我的存貨，也有些是我自己寫的狈邑。另外城须，這篇只講樣式，以后會繼續(xù)補(bǔ)充CSS3之動畫篇米苹。
看到這里糕伐，沒有任何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)的梳理一下知識體系丧靡，我這里只舉個(gè)簡單的例子。
如果你的界面里需要的按鈕是上面這種多個(gè)規(guī)格籽暇，有大有小温治，準(zhǔn)備怎么辦？如果每個(gè)規(guī)格還有各種寬度不一的尺寸怎么辦戒悠？擼起袖子開始切圖嘛熬荆？或許設(shè)計(jì)師會不服氣的說，我的界面設(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í)會用到的選項(xiàng)枯途。
因?yàn)檫@篇不講動畫忌怎，所以按鈕的動效先略過去，可以放到css3動畫里一并講柔袁，我們來看一下按鈕會用到的屬性呆躲。
先隨便畫一枚按鈕圖標(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)不了歇由，前端攻城獅有很好的工具來自動兼容各種瀏覽器版本卵牍，比如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里的屬性值有字重推盛、字號和字體峦阁，也不用管，因?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è)效果，其他特效下面會說到蓄诽，但用到的確實(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)加派。“逗號,”可以連接一個(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即可谤祖，后面會說明不能太大的原因婿滓，具體的方法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會話不是很值得時(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()里了乃沙。
看了上面這些，你會大吼诗舰，好麻煩警儒，勞資是設(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)樣式僅僅是上面這種较店，那么你或許會說改改大小還好，改顏色的話也不是很方便嘛容燕，需要在代碼中把所有的色值換一遍梁呈。那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色彩模型熟悉的話霞揉，就會知道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è)小知識點(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è)知識點(diǎn)是當(dāng)一個(gè)顏色的起始點(diǎn)與上一個(gè)顏色的結(jié)束點(diǎn)重合時(shí)，無漸變效果印颤，大家就想象成和ps里漸變兩個(gè)色標(biāo)的重疊您机。你如果能在ps漸變里實(shí)現(xiàn)條紋漸變，那么就能更好的理解這個(gè)語法了。但案例中的代碼并不是最好的表示方法际看，我在后面會貼上自己改進(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;即高度為視窗高度努潘，否則你會看到支離破碎無法解釋的效果。
關(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)從上到下的漸變一樣托酸，對于徑向漸變而言褒颈，不定義圓心位置會默認(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語言解讀就是圓心位置的移動（使用笛卡爾坐標(biāo)系泉唁，向右向下為正）。
另外插入一個(gè)小知識點(diǎn)揩慕，上面徑向漸變疊加時(shí)我用了簡單的寫法background亭畜，而不是background-image，這樣是可以的迎卤，但這時(shí)如果把background-color:gray; 放到background之前拴鸵，那我們的灰色背景就會失效，簡單來說蜗搔，我們的CSS文件在被執(zhí)行時(shí)劲藐，遇到background會把前面所有背景相關(guān)的屬性一概清空，所以為了不出錯(cuò)樟凄，以后在使用背景各種屬性時(shí)聘芜，盡量不要采用簡寫。
一定切記缝龄，雖然CSS3強(qiáng)大到?jīng)]朋友汰现，但對于一些圖形的重復(fù)，你需要使用的是svg背景填充叔壤，而不是利用css3變換來實(shí)現(xiàn)各種圖形服鹅，CSS3最常用的背景是條紋圖“傩拢總之，掌握的知識越多庐扫，你用的時(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嘛糊肠，你看，知識都是互通的對不對遗锣。
我們來拿上面我喜歡的那個(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í)，字號越大越粗越漂釀姓蜂，字體最好是無襯線體按厘。
本來還有一個(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)圖能力戳吝，我自己也弱成渣渣浩销，才會靠這種旁門左道來提升自我價(jià)值，不會CSS難道就不是好的UI了嘛听哭，設(shè)計(jì)大牛出來理直氣壯的說：“才不會慢洋！”塘雳，哈哈。但不容置疑的是普筹，掌握CSS會讓你的設(shè)計(jì)加分败明，也會讓開發(fā)人員擺脫對你的“代碼小白”的印象。好吧好吧太防，不扯了妻顶，其實(shí)是給我們設(shè)計(jì)人員自己偷懶用的。另外蜒车，既然選擇做了UI讳嘱，就要讓自己脫離平面設(shè)計(jì)的思維，更多的去探索軟件表現(xiàn)層下面的東西酿愧，也就是樣式層面沥潭，甚至了解結(jié)構(gòu)層，才會在UI的路上深入的走下去寓娩。
總結(jié)一下這篇文章的幾個(gè)知識點(diǎn)：
photoshop圖層樣式與CSS3屬性的對應(yīng)
Data URL的使用
CSS3樣式疊加產(chǎn)生的各種效果（重點(diǎn)是漸變生成條紋）
CSS3支持背景的混合效果
一些特殊的應(yīng)用：3D立體字體叛氨，填充文字等等
關(guān)于樣式方面，如果掌握上面這些全部棘伴，對于UI設(shè)計(jì)師來說寞埠，應(yīng)該基本差不多了，最后友情提示焊夸，如果你跑得太快仁连，前端沒跟上（不排除存在這種情況），請尊重他們阱穗，他們說不會用或者實(shí)現(xiàn)不了的時(shí)候（不過CSS3樣式的話應(yīng)該不至于饭冬，以后CSS3動畫就很難說了），請按他們說的來揪阶，畢竟昌抠，UI設(shè)計(jì)師請記住，你做的永遠(yuǎn)只是效果圖鲁僚。
大家在使用CSS3樣式效果中有任何疑問也可以給我留言炊苫，最近在總結(jié)CSS3的樣式相關(guān)方面的知識，會盡量解答冰沙，共同進(jìn)步侨艾。（以上瀏覽器效果均為Chrome下效果，其他不管不聽不問）
