CSS 和 Photoshop（簡稱 PS）都是網頁設計必不可少的工具。其中，CSS 用于控制網頁的樣式，而 PS 則可以幫助我們將網頁設計圖切成小圖標，以方便我們使用。

如何使用 PS 切圖？
1. 將設計圖導入 PS 的畫布中。
2. 使用矩形選擇工具選中要切的圖標。
3. 使用剪切或復制功能，將選中的圖標粘貼到新的圖層中。
4. 隱藏原圖層，保存新圖層為 Web 用的 PNG 或 JPG 格式。
5. 重復以上步驟，直到所有需要的圖標都被切出來。

接下來，我們需要將切出來的圖標用 CSS 進行布局。

如何使用 CSS 進行布局？
1. 在 HTML 文件中引入切出來的圖標，可以使用如下代碼：
<img src="icon.png">
2. 使用 CSS 設置圖標的樣式，例如：
img {
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
3. 使用 CSS 進行布局，例如：
.container {
display: flex;
justify-content: center;
align-items: center;
}

以上是使用 PS 切圖和 CSS 布局的基本步驟，希望能對初學者有所幫助。