今天封面是我學的第一個前端框架 Vue.js，雖然也只會一點點，而且也跟這一次的主題無關 www
但因為之前把它畫在封面上，所以讓他當一天的主角！！！
前陣子有去台北參加了 Vue.js Taiwan 社群辦的小聚活動，剛好有自己有興趣的主題，覺得滿棒的 (=´ω`=)
推薦對 Vue 有興趣的朋友，也能去參加看看社群活動呦，而且十月好像要辦大場的活動，推薦大家可以去看看～

回到今天的主題！

昨天介紹了文字顏色、邊框、外邊框與背景，這些屬性能幫助我們建立畫面的基本結構。
今天要再加上一點光影與透明效果，讓元素之間的層次更清楚，也讓介面看起來更有立體感！

直接開始介紹吧！

Box-shadow 區塊陰影

box-shadow 為元素新增陰影效果，可以增加頁面的立體感並提供視覺層次。

/* 基本語法 */
box-shadow: 水平偏移 垂直偏移 模糊半徑 顏色;
/* 完整語法 */
box-shadow: 水平偏移 垂直偏移 模糊半徑 擴散半徑 顏色;

.box {
  width: 100px;
  height: 100px;
  /*外陰影 */
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);

  /* 內陰影 */
  box-shadow: inset 2px 2px 8px rgba(0, 0, 0, 0.8);
  
  /* 多重陰影 */
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

• 格式說明

  • 水平偏移：正值向右，負值向左
  • 垂直偏移：正值向下，負值向上
  • 模糊半徑：數值越大陰影越模糊（可選，預設 0）
  • 擴散半徑：正值陰影擴大，負值陰影縮小（可選，預設 0）
  • 顏色：陰影顏色（建議使用 rgba 控制透明度）
  • inset：內陰影關鍵字（可選）

• 使用建議

  • 適度為元素新增陰影效果，可以替介面增加立體感和層次感，讓重要內容更加突出。但需注意，過度使用陰影效果，則會讓頁面顯得雜亂和沉重。

  • 設定水平偏移、垂直偏移和模糊半徑均為 0，並僅調整擴散半徑，就可以模擬出不佔據空間的 outline 外邊框效果。搭配 inset 關鍵字，還能將陰影效果應用於元素內部。

    /* 利用陰影作為邊框 */
    box-shadow: 0 0 0 2px #ff0000;
    box-shadow: inset 0 0 0 2px #000000ff;
    

Text-shadow 文字陰影

text-shadow 屬性為文字新增陰影效果。其設定方式與 box-shadow 相似，但不支援 inset 關鍵字和擴散半徑。不過，它仍可同時設定多個陰影效果，實現複雜的視覺呈現。

/* 基本語法 */
text-shadow: 水平偏移 垂直偏移 模糊半徑 顏色;

h1 {
  /* 基本陰影 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  
  /* 清晰邊緣陰影 */
  text-shadow: 1px 1px 0 #000000;
  
  /* 多重陰影 */
  text-shadow: 
    1px 1px 0 #ff0000,
    -1px -1px 0 #0000ff;
    
  /* 發光效果 */
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

• 使用建議

  • 與區塊陰影一樣，文字陰影應適度使用，過多或過重的文字陰影會降低可讀性並造成視覺疲勞。
  • 當文字被背景顏色或圖片干擾時，可以設定適當的文字陰影來提升可讀性。

Opacity 透明度

opacity 屬性設定元素透明度，獨立於顏色設定，影響整個元素（包含內容和子元素）。與其他顏色樣式不同，opacity 會同時影響元素的所有部分（文字、背景、邊框等）。

/* 基本語法 */
opacity: 0.5;  /* 50% 透明度 */

.element {
  opacity: 0.8;  /* 80% 不透明（20% 透明） */
}

• 格式說明
  • 取值範圍為 0 到 1 之間。
  • 0 表示完全透明（不可見），1 表示完全不透明（正常顯示）。
• 特性與限制
  • opacity 屬性影響整個元素及其所有子元素，無法單獨設定子元素的透明度。
  • 如果只想調整背景或文字的透明度，建議使用 rgba 或 hsla 顏色值。
  • opacity 為 0 的元素仍會占據空間並可被點擊，若要完全移除元素，請使用 display: none 或 visibility: hidden。

總結

Day 12 與 Day 13 都是在認識如何替網頁畫面建立視覺層次。從 color、border、outline、background 到漸層，我們可以先定義文字、區塊與不同資訊之間的對比；接著再透過 box-shadow、text-shadow 與 opacity，為元素增加深度、焦點與透明感。

在實際設計時，可以先確認文字與背景是否清楚易讀，再利用邊框、背景色或漸層區隔內容，最後才適度加入陰影與透明度來加強層次。效果不需要堆得太多，保留一致的色彩、對比與留白，畫面就能更舒服，也更容易讓使用者找到重要資訊。