参考资料

  1. css div居中代码
  2. align-self: auto/stretch详细说明
  3. 如何用Flex布局实现导航栏？
  4. 几种常用的 CSS 横向布局方法
  5. 目标伪类选择器详细说明以及案例
  6. CSS弹性盒子详细说明以及案例
  7. Flexbox 布局有哪些高级用法？
  8. * 通配符选择器详细说明以及案例

CSS Div 阴影效果

  1. 主要属性

  • box-shadow: 用于创建元素阴影效果

  • text-shadow: 用于创建文本阴影效果

  1. box-shadow 属性语法
    box-shadow: h-shadow v-shadow blur spread color inset;

参数说明：

  • h-shadow: 水平阴影位置（必需）

  • v-shadow: 垂直阴影位置（必需）

  • blur: 模糊距离（可选）

  • spread: 阴影尺寸（可选）

  • color: 阴影颜色（可选）

  • inset: 内部阴影（可选）

  1. 常见用法示例

基础阴影：
div {
 box-shadow: 5px 5px 10px #888888;
}

模糊阴影：
div {
 box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

内阴影：
div {
 box-shadow: inset 0 0 10px #000000;
}

多重阴影：
div {
 box-shadow: 3px 3px 5px #666, -3px -3px 5px #999;
}

  1. 完整示例代码

<!DOCTYPE html>
<html>
<head>
<style>
.shadow-box {
  width: 200px;
  height: 100px;
  padding: 20px;
  background-color: #f0f0f0;
  margin: 30px;
}

.example1 {
  box-shadow: 5px 5px 5px #ccc;
}

.example2 {
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.example3 {
  box-shadow: inset 0 0 10px #333;
}

.example4 {
  box-shadow: 5px 5px 5px #999, -5px -5px 5px #eee;
}
</style>
</head>
<body>

<div class="shadow-box example1">基础阴影效果</div>
<div class="shadow-box example2">模糊阴影效果</div>
<div class="shadow-box example3">内阴影效果</div>
<div class="shadow-box example4">多重阴影效果</div>

</body>
</html>

  1. 浏览器兼容性

  • 所有现代浏览器都支持box-shadow属性

  • IE9+支持该属性

  • 对于旧版浏览器可能需要使用滤镜或特定前缀

TAG：阴影效果浏览器模糊示例主要元素文本属性语法参数