要添加css邊框陰影，應使用box-shadow屬性，其基本語法為：box-shadow: h-shadow v-shadow blur spread color inset；1. h-shadow設置水平陰影位置，允許負值；2. v-shadow設置垂直陰影位置，也允許負值；3. blur控制模糊程度，數值越大越模糊；4. spread調節陰影擴散范圍，正值擴大、負值縮小；5. color定義陰影顏色；6. inset用于將陰影設為內陰影；可以通過疊加多個box-shadow實現更復雜效果，如模擬3d層次或高光；但需注意性能問題；box-shadow與border不沖突，但搭配border-radius時可能超出圓角邊界，可通過調整blur或spread解決；也可通過增加spread或調整padding避免大border寬度遮擋陰影；此外，box-shadow可結合:hover偽類制作懸停效果，配合transition實現平滑動畫。
添加css邊框陰影，簡單來說，就是使用box-shadow屬性。它可以讓你的網頁元素看起來更有層次感，但用不好也會顯得廉價。關鍵在于理解它的參數和巧妙運用。
/* 基本語法 */ box-shadow: h-shadow v-shadow blur spread color inset; /* 示例 */ box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* 常用 */ box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.2); /* 帶擴散 */ box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.5); /* 內陰影 */
h-shadow：水平陰影的位置，允許負值。 v-shadow：垂直陰影的位置，允許負值。 blur：模糊距離，值越大，陰影越模糊。 spread：陰影的擴散范圍，正值增加陰影大小，負值縮小陰影大小。 color：陰影顏色。 inset：將陰影改為內陰影。
如何使用多個box-shadow創造更復雜的效果？
你可以疊加多個box-shadow，創造出更復雜、更微妙的效果。這就像繪畫一樣，一層一層地疊加顏色和陰影。
.element { box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4), /* 第一層陰影 */ -2px -2px 4px rgba(255, 255, 255, 0.1); /* 第二層陰影，模擬高光 */ }
這種技巧可以用來模擬3D效果，或者為元素增加更豐富的視覺層次。注意，過多的陰影可能會導致性能問題，所以要適度使用。
立即學習“前端免費學習筆記（深入）”；
box-shadow與border屬性沖突嗎？如何協調使用？
box-shadow并不會直接與border屬性沖突，它們是獨立控制元素外觀的不同方面。但是，不恰當的組合可能會導致視覺上的不協調。
一個常見的場景是，當border-radius與box-shadow一起使用時，如果box-shadow的blur值過大，陰影可能會超出圓角邊界，看起來不美觀。
.element { border: 1px solid #ccc; border-radius: 5px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* 陰影超出圓角 */ }
解決方法是調整blur值，或者使用spread屬性來控制陰影的大小。
.element { border: 1px solid #ccc; border-radius: 5px; box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.3); /* 調整后的陰影 */ }
另一個需要注意的是，如果border的寬度很大，box-shadow可能會被遮擋。這時，可以考慮增加box-shadow的spread值，或者調整元素的padding。
如何使用box-shadow制作懸停效果？
box-shadow可以與:hover偽類結合使用，創建吸引人的懸停效果。
.button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; cursor: pointer; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* 初始陰影 */ transition: box-shadow 0.3s ease; /* 添加過渡效果 */ } .button:hover { box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.4); /* 懸停時的陰影 */ }
這段代碼會在鼠標懸停在按鈕上時，增加陰影的深度，讓按鈕看起來像是被“抬起”了一樣。transition屬性可以使這個變化過程更加平滑。
