CSS是前端開發的必備技能之一，其中陰影和邊框是常用的樣式屬性。本文將介紹CSS陰影和邊框屬性中的box-shadow和outline屬性并提供示例代碼。

首先，我們先來看box-shadow屬性。該屬性用于在HTML元素的周圍添加陰影效果。box-shadow屬性有以下語法：

box-shadow: h-shadow v-shadow blur spread color inset;

其中，h-shadow和v-shadow是必需的值，它們表示陰影在水平和垂直方向上的偏移量。blur值指定陰影的模糊度，spread值指定陰影的擴散程度。可以選擇使用inset關鍵字將陰影設為內陰影。如果省略顏色值，則默認為陰影的元素的顏色。下面是一個簡單的box-shadow示例：

.box{
box-shadow: 2px 2px 2px #888888;
}

以上代碼表示在類名為box的HTML元素上添加2像素水平和垂直位置的陰影，模糊度為2像素，顏色為#888888。

下面介紹outline屬性。outline屬性用于在HTML元素周圍繪制一條線，通常用于為HTML元素創建輪廓。它具有以下語法：

outline: outline-color outline-style outline-width;

其中，outline-color值指定輪廓的顏色，outline-style指定輪廓的樣式（如實線、虛線、點線等），outline-width指定輪廓寬度大小。下面是一個簡單的outline示例：

.box{
outline: 2px solid red;
}

以上代碼表示在類名為box的HTML元素周圍繪制一條紅色的2像素寬實線輪廓。

通過以上示例代碼，相信大家已經掌握了box-shadow和outline屬性的用法。在實際開發過程中，可以根據需求調整各屬性值以達到最佳效果。