CSS 如何玩設置陰影 在 CSS 中，我們可以通過一些屬性來設置元素的陰影效果，讓頁面看起來更加立體感和層次感，提高用戶體驗。 下面我們就來一起探究如何設置陰影。 1. box-shadow box-shadow 屬性可以用來設置一個或者多個陰影效果。 語法如下： ``` box-shadow: h-shadow v-shadow blur spread color inset; ``` - h-shadow：表示陰影向右偏移的距離。可以是負值，表示陰影往左偏移。 - v-shadow：表示陰影向下偏移的距離。可以是負值，表示陰影往上偏移。 - blur：表示陰影的模糊程度，數值越大，陰影越模糊。可以是 0，表示陰影不模糊。 - spread：表示陰影的擴散程度，數值越大，陰影效果越顯眼。可以是 0，表示陰影不擴散。 - color：表示陰影的顏色。可以是關鍵詞、十六進制、RGB 等格式。 - inset：可選，表示將陰影從外部變為內部陰影。 例如，我們可以通過以下代碼實現一個元素的陰影效果： ``` box-shadow: 0px 1px 10px #ccc; ``` 這表示元素的陰影向下偏移 1 像素，陰影模糊程度為 10 像素，顏色為 #ccc。 2. text-shadow text-shadow 屬性可以用來設置文字的陰影效果，讓文字看起來更加突出。 語法如下： ``` text-shadow: h-shadow v-shadow blur color; ``` - h-shadow：表示陰影向右偏移的距離。 - v-shadow：表示陰影向下偏移的距離。 - blur：表示陰影的模糊程度，數值越大，陰影越模糊。 - color：表示陰影的顏色。 例如，我們可以通過以下代碼實現文字的陰影效果： ``` text-shadow: 1px 1px 2px #ccc; ``` 這表示文字的陰影向右偏移 1 像素、向下偏移 1 像素，陰影模糊程度為 2 像素，顏色為 #ccc。 綜上所述，通過 box-shadow 和 text-shadow 屬性，我們可以輕松實現元素和文字的陰影效果，增強頁面視覺效果，為用戶提供更好的閱讀體驗。