CSS 陰影上下左右

在設計頁面布局時，為了增加頁面的復雜性和美觀度，設計師常常會將頁面元素加上陰影。在 CSS 中，陰影分為上下左右四個方向，使用起來非常簡單。

陰影的語法

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

其中，參數的含義分別為：

• h-shadow：陰影的水平位置，正值陰影在元素右側，負值陰影在元素左側。
• v-shadow：陰影的垂直位置，正值陰影在元素下方，負值陰影在元素上方。
• blur：模糊距離，值越大，模糊程度越高。
• spread：擴展距離，值越大，陰影越大。
• color：陰影顏色。
• inset：陰影內部，為 optional，表示將陰影放在元素內部。

陰影的實例

以下是使用 CSS 在上下左右四個方向添加陰影的實例：

/*向下陰影*/
.box {
box-shadow: 0px 5px 5px #ccc;
}
/*向上陰影*/
.box {
box-shadow: 0px -5px 5px #ccc;
}
/*向左陰影*/
.box {
box-shadow: -5px 0px 5px #ccc;
}
/*向右陰影*/
.box {
box-shadow: 5px 0px 5px #ccc;
}

如上代碼中的.box是元素的類名，可以根據實際的需求進行更改。

除此之外，你也可以組合上下左右四個方向的陰影，達到更加豐富的效果。例如：

/*組合陰影*/
.box {
box-shadow: 0 0 5px 2px #ccc, 0 0 20px 5px #aaa;
/*上 5px 模糊程度為 2px 灰色，下 20px 模糊程度為 5px 灰色*/
}

總結

CSS 中的陰影屬性非常方便，可以用來美化頁面，增加元素的深度感。使用時只需掌握其語法和含義即可。希望以上內容對你有所幫助。