6.1 屬性 box-shadow
在 CSS 中使用 box-shadow 屬性來為元素添加陰影。這個屬性允許創建多樣化的視覺效果，提升網頁的外觀。讓我們詳細探討 box-shadow 的語法、值和使用範例。
box-shadow 語法
box-shadow 屬性接受一個或多個值，每個值定義陰影的參數。一般語法如下：
element {
box-shadow: offset-x offset-y blur-radius spread-radius color;
}
值：
offset-x: 陰影的水平位移。正值將陰影向右移，負值向左移offset-y: 陰影的垂直位移。正值將陰影向下移，負值向上移blur-radius: 陰影的模糊半徑。值越大，陰影越模糊。預設值為 0（無模糊）spread-radius: 陰影的擴展半徑。正值增加陰影的大小，負值減少。預設值為 0color: 陰影的顏色。支持所有 CSS 顏色格式
6.2 使用範例
基礎陰影：
CSS
.shadow-basic {
width: 200px;
height: 200px;
background-color: #3498db;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
margin: 20px;
}
HTML
<body>
<div class="shadow-basic">基礎陰影</div>
</body>
模糊陰影：
CSS
.shadow-blur {
width: 200px;
height: 200px;
background-color: #2ecc71;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
HTML
<body>
<div class="shadow-blur">模糊陰影</div>
</body>
擴展陰影：
CSS
.shadow-spread {
width: 200px;
height: 200px;
background-color: #e74c3c;
box-shadow: 10px 10px 20px 10px rgba(0, 0, 0, 0.5);
margin: 20px;
}
HTML
<body>
<div class="shadow-spread">擴展陰影</div>
</body>
內部陰影：
CSS
.shadow-inset {
width: 200px;
height: 200px;
background-color: #f1c40f;
box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
HTML
<body>
<div class="shadow-inset">內部陰影</div>
</body>
6.3 box-shadow 設置
細節設置 box-shadow：
陰影偏移（offset-x 和 offset-y）
- 正值: 陰影向右偏移（
offset-x）和向下偏移（offset-y） - 負值: 陰影向左偏移（
offset-x）和向上偏移（offset-y）
陰影模糊（blur-radius）
- 值 0: 陰影將是清晰的，無模糊
- 正值: 值越大，陰影越模糊
陰影擴展（spread-radius）
- 正值: 陰影增大
- 負值: 陰影縮小
陰影顏色（color）
顏色可以用不同格式來設置：顏色名稱、十六進制碼、RGB、RGBA、HSL、HSLA。
內部陰影（inset）
關鍵字 inset 創建元素內部的陰影，可以用來打造凹陷效果。
多個不同參數的陰影：
CSS
.multiple-shadows {
width: 200px;
height: 200px;
background-color: #bdc3c7;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 15px rgba(0, 0, 0, 0.3);
margin: 20px;
}
HTML
<body>
<div class="multiple-shadows">多個陰影</div>
</body>
GO TO FULL VERSION