DIV CSS 佈局教程網

我們不能用Stroke去給矩形加外邊框，因為虛邊會把你給搞死。如果你用Rounded Rectangle工具畫出來的圓角矩形已經出現了非Stroke虛邊，那就把節點打散後，用黑色箭頭工具選中那個Path，點擊路徑面板的Round Points to Pixels把路徑的所有節點歸位到像素交點（也可以用白色箭頭工具選中某個節點單獨進行歸位）。

Step 03

把大的圓角矩形復制一份放到最頂層，用白色箭頭配合Shift+方向鍵得到一個倒三角，隨即復制一份，上面的倒三角用Linear填充漸變；下面的倒三角實心填充褐色，並設置1px羽化。

Step 04

用白色箭頭選中途中所示那些節點，然後用鍵盤的方向鍵往下挪兩個像素，這樣使信封看起來長一點（因為這裡單個圖標不受整體風格約束）。

Step 05

把之前畫的漸變填充倒三角作垂直翻轉，復制一份擺放好，它們的位置關系如下圖所示。兩個倒三角上下相隔1px多一點。可以用白色箭頭工具選擇深褐色倒三角上方的四個節點，以鼠標拖動的方式配合輔助線挪動把節點往上挪0.3~0.5個像素，這樣可以讓深褐色的先顯得不那麼虛（再一次重申，盡早打消用Stroke作邊線的念頭，這裡不是Photoshop）。