参考资料

  1. Flexbox布局有哪些常见的误区？
  2. css3阴影效果
  3. 哪种布局方式更适合移动端？
  4. css布局格式
  5. 后代选择器详细说明以及案例
  6. css div内容居中
  7. 边框属性详细说明以及案例
  8. 背景属性详细说明以及案例

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：阴影效果模糊黑色示例性能浏览器属性元素语法

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。