CSS3 PK Photoshop：圓角和框投影

本教程旨在教咱們結合CSS3款式創立一個美麗，簡練的導航欄。而在曩昔，咱們只能借助圖片，JavaScript和div層進行創造。

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

準備工作

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

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

第一步：圓角

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

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

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

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

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

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