UI元件的陰影 - daniel-qa/Vue GitHub Wiki
box-shadow 設定是一種常見的設計經驗法則，模擬了來自上方（或左上方）光源投射下來的陰影效果。
<!-- 篩選條件-->
<el-row>
<!-- 左边部分，三分之二 -->
<el-col :span="16">
<div>篩選條件設定</div>
</el-col>
<!-- 右边部分，三分之一 -->
<el-col :span="8" style="background-color:white;" class="shadow-box">
<div>篩選條件清單</div>
</el-col>
</el-row>
/* 陰影 */
.shadow-box {
background-color: white;
padding: 16px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
margin: 8px; /* 加上間距，確保 shadow 不被邊界擋住 */
}
0：水平偏移量，表示陰影不會向左或向右偏移。
4px：垂直偏移量，陰影會向下移動 4px。
10px：模糊半徑，數字越大陰影越模糊、範圍越廣。
rgba(0, 0, 0, 0.1)：陰影的顏色，這裡是黑色但只有 10% 的不透明度，看起來會比較柔和