参考资料

  1. 使用CSS Grid和Flexbox两种现代布局方式实现4列12个产品布局的方法
  2. CSS响应式详细说明以及案例
  3. 类选择器详细说明以及案例
  4. css div内容居中
  5. css div阴影效果,
  6. 详细说明Flexbox基础属性
  7. CSS有哪些常用的选择器？
  8. css样式div居中

CSS Div 阴影效果

1. box-shadow 属性

  • 作用：为元素添加阴影效果。

  • 语法：

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

  • 参数：

    • h-offset：水平阴影偏移（必需）。

    • v-offset：垂直阴影偏移（必需）。

    • blur：模糊距离（可选，默认0）。

    • spread：阴影扩展（可选，默认0）。

    • color：阴影颜色（可选，默认黑色）。

    • inset：内阴影（可选，默认外阴影）。

2. 基本用法

  • 外阴影：

    div {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

    • 效果：向右下偏移5px，模糊10px，半透明黑色。

  • 内阴影：

    div {
  box-shadow: inset 0 0 8px #000;
}

3. 多阴影效果

  • 示例：

    div {
  box-shadow: 
    3px 3px 5px #ccc,
    -1px -1px 2px #fff;
}

4. 实际示例

<!DOCTYPE html>
<html>
<head>
<style>
  .shadow-box {
    width: 200px;
    height: 100px;
    background: #f0f0f0;
    margin: 30px;
    padding: 20px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
  }
  .inset-shadow {
    box-shadow: inset 0 0 10px #333;
  }
</style>
</head>
<body>
  <div class="shadow-box">外阴影效果</div>
  <div class="shadow-box inset-shadow">内阴影效果</div>
</body>
</html>

5. 注意事项

  • 阴影不影响布局（不占空间）。

  • 性能：过度使用模糊阴影可能影响渲染性能。

  • 浏览器支持：所有现代浏览器均支持。

TAG：阴影效果模糊黑色示例性能浏览器属性元素语法