CSS3 PK Photoshop：圓角和框投影

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

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

準(zhǔn)備工作

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

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

第一步：圓角

咱們都聽說過圓角，咱們就不具體敘述圓角該如何規(guī)劃了。在接下來的例子中，咱們著重敘述用Photoshop和CSS3實現(xiàn)圓角作用的差異。

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

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

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

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

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