在前面我們學過排版與顏色，已經能把網頁的基本結構和外觀建立起來。但如果畫面只有文字、顏色和簡單的排版，還是容易顯得平面、缺乏層次。
今天我們要進一步學習一些能提升「設計感」的小技巧。背景與邊框能提供基礎的裝飾效果，用來區分不同的區塊或強調內容的邊界。而陰影與透明度則像是加上光影與質感，能讓元素不再只是單純的方塊，而是更立體、有空間感。這些屬性雖然看似細節，但往往能決定網頁是陽春還是專業，掌握之後，整體視覺效果會有明顯提升。

1. 背景（background）

background-color：設定純色背景，例如 background-color: #f0f0f0;。

background-image：放上圖片，可以搭配 background-size: cover; 與 background-position: center; 來做滿版效果。

2. 邊框（border）

語法：border: 粗細 樣式 顏色;
例如：border: 2px dashed red;。

樣式常見有 solid（實線）、dashed（虛線）、dotted（點線）。

搭配 border-radius 可做出圓角，甚至圓形元素。

3. 盒子陰影（box-shadow）

box-shadow 可以讓區塊有立體感，像卡片設計常用：

.card {
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

語法順序：水平位移、垂直位移、模糊範圍、顏色。
多用在按鈕、卡片或浮動效果。

4. 透明度（opacity）

opacity: 0.5; 表示半透明。

整個元素都會受影響（包含文字與圖片）。

常搭配 hover 效果，例如：

img:hover {
opacity: 0.7;
}

讓圖片在滑鼠移上去時有淡淡的變化感。

心得分享

學習過程讓我發現，這些細節真的能大幅改變設計感。背景和邊框可以做基本的分區與裝飾，而加上陰影後，整個版面會更有層次，更好看；透明度則能用來做互動效果或突顯主體。以前覺得要做出美觀的網站很難，但其實只要多加這些小技巧，畫面就能馬上「活起來」，也更有專業的感覺感。