使用box-shadow 屬性可輕鬆添加陰影，其語法為box-shadow: offset-x offset-y blur-radius spread-radius color；1. 基本用法中只需指定前兩個值，其餘可選；2. 使用inset 關(guān)鍵字可創(chuàng)建內(nèi)陰影；3. 通過逗號分隔可添加多個陰影；顏色推薦使用rgba() 實現(xiàn)透明效果，模糊半徑越大陰影越柔和，擴(kuò)展半徑可擴(kuò)大或縮小陰影範(fàn)圍，且box-shadow 不影響佈局並廣泛支持，但應(yīng)避免在動畫元素上過度使用以保持性能。

Adding a box shadow in CSS is straightforward using the box-shadow property. It lets you add shadow effects around an element's frame. Here's how to use it effectively.

Basic Syntax

The box-shadow property uses this syntax:

 box-shadow: offset-x offset-y blur-radius spread-radius color;

Only the first two values ( offset-x and offset-y ) are required — the rest are optional and default to 0 if not specified.

Example:

 .card {
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
}

This adds a shadow that:

• Moves 2px to the right
• 4px down
• With an 8px blur
• Slight transparency using rgba

Common Use Cases and Tips

1. Subtle Drop Shadow (for cards or buttons)

Ideal for UI components to give a lifted appearance.

 .card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

This keeps the shadow soft and realistic, mimicking light from above.

2. Inset Shadow (inside the box)

Use the inset keyword to create a shadow inside the element.

 .input {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

Great for giving a pressed or recessed look, like in text inputs or toggles.

3. Multiple Shadows

You can apply more than one shadow by separating them with commas.

 .button {
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.05);
}

Layering shadows can create depth or simulate multiple light sources.

Key Details to Remember

• Color : Use rgba() for transparency (eg, rgba(0, 0, 0, 0.1) ), or named colors like gray .
• Blur radius : Higher values = softer, more diffused shadow.
• Spread radius : Positive values expand the shadow; negative values shrink it.
• Performance : Box shadows are generally GPU-accelerated, but avoid excessive use on animated elements.

Quick Example

 <div class="card">Hello, I have a shadow!</div>

 .card {
  width: 200px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

This creates a clean, modern card with a gentle shadow.

Basically, just set box-shadow with your desired values — it's non-destructive (doesn't affect layout) and widely supported. Not much more to it, but small tweaks make a big visual difference.

以上是如何在CSS中添加盒子陰影？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！