CSS3 PK Photoshop：圓角和框投影

本教程旨在教咱們結(jié)合CSS3款式創(chuàng)立一個(gè)美麗，簡(jiǎn)練的導(dǎo)航欄。而在曩昔，咱們只能借助圖片，JavaScript和div層進(jìn)行創(chuàng)造。

注意：下面所有的示例都是在Mozilla Firefox，Safari和Chrome中進(jìn)行測(cè)試。你也可以再IE等非上述瀏覽器中測(cè)試一下實(shí)際作用。

準(zhǔn)備工作

在網(wǎng)頁(yè)規(guī)劃的早期，外觀美麗，規(guī)劃精美的導(dǎo)航欄便是保持網(wǎng)站條理清晰，結(jié)構(gòu)良好的強(qiáng)有力元素之一。在曩昔，一個(gè)好的規(guī)劃所用到的投影（shadow），突變色（gradient），圓角（rounded corners）和鼠標(biāo)懸停作用（hover）等都需求一系列的技巧，但這會(huì)添加代碼和圖片數(shù)量。

咱們會(huì)在教程中深挖兩個(gè)非常重要的CSS3作用：圓角和框投影（Box Shadows），另外，本文還會(huì)運(yùn)用線性突變（線性突變已在此文進(jìn)行過(guò)介紹CSS3 vs Photoshop – Complex Backgrounds）。

第一步：圓角

咱們都聽(tīng)說(shuō)過(guò)圓角，咱們就不具體敘述圓角該如何規(guī)劃了。在接下來(lái)的例子中，咱們著重?cái)⑹鲇肞hotoshop和CSS3實(shí)現(xiàn)圓角作用的差異。

用任何圖形處理軟件都能非常簡(jiǎn)單地創(chuàng)立一個(gè)圓角作用。但是在Photoshop中，咱們會(huì)遇到以下問(wèn)題：

精度問(wèn)題：即使你設(shè)置了圓角半徑，Photoshop內(nèi)置的抗鋸齒引擎通常還是會(huì)為圖片增添剩余的像素。曩昔，大多數(shù)人都有必要得手動(dòng)去掉這些影響圓角精度的像素，讓圖畫(huà)的圓角處愈加潔凈，例如下圖的紅色的圓角出的剩余像素。

編輯問(wèn)題：這是創(chuàng)立圓角圖形遇到的最大問(wèn)題。假如你在Photoshop中創(chuàng)立了一個(gè)半徑為10像素的圓角圖形，但出于需求，你得把半徑添加到20像素，除了從頭拉伸圖形，或手動(dòng)編輯圓角外，沒(méi)有其它方法，時(shí)刻浪費(fèi)了，并且又不準(zhǔn)確。重定大小是一個(gè)大問(wèn)題，假如你想拉伸或擴(kuò)大圖形，你有必要運(yùn)用Photoshop中的錨點(diǎn)挑選工具，由于運(yùn)用自在改換（Transform Controls）可能導(dǎo)致圓角圖形邊際失真�；ㄔ趫A角切片上時(shí)刻還沒(méi)有包括在內(nèi)。

填充和邊框：對(duì)圓角框圖形進(jìn)行突變填充往往是一項(xiàng)浩大的工程。沒(méi)有掩蓋邊框，你還要準(zhǔn)確地去掉相關(guān)圖片的剩余像素。你至少要為每個(gè)框創(chuàng)立3副圖畫(huà)，一個(gè)是頂部的圓角，另外是底部圓角，以及創(chuàng)立水平或垂直突變，然后寫(xiě)代碼。填充圖片遇到的另一問(wèn)題是，減小容器的高度和寬度，得到突變色得到不合要求的作用。（見(jiàn)下圖所示）

混合角款式：在Photoshop中，創(chuàng)立混合角的款式得花一點(diǎn)時(shí)刻，由于它并沒(méi)提供這樣的結(jié)合方式。你只能手動(dòng)添加會(huì)減少半徑或結(jié)合圖形，然后裁剪每個(gè)角。