参考资料

1. 子选择器详细说明以及案例
2. css div居中代码
3. Flex布局在动画制作中的应用？
4. css怎么使div居中
5. CSS尺寸属性详细说明以及案例
6. 如何优化Flexbox布局的性能？
7. css阴影效果属性效果是什么
8. 背景属性详细说明以及案例

css3中设置阴影的属性是

CSS3中设置阴影的属性是box-shadow和text-shadow。

1. box-shadow（盒子阴影）

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

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

• blur：模糊距离（可选）

• spread：阴影尺寸（可选）

• color：阴影颜色（可选）

• inset：内阴影（可选）

• 属性：box-shadow: h-shadow v-shadow blur spread color inset;

• 用法：

  div {
    box-shadow: 10px 10px 5px #888888;
  }

• 示例：

  /* 外阴影 */
  .shadow1 {
    box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
  }
  
  /* 内阴影 */
  .shadow2 {
    box-shadow: inset 0 0 10px #000000;
  }
  
  /* 多重阴影 */
  .shadow3 {
    box-shadow: 3px 3px 5px red, -3px -3px 5px blue;
  }

2. text-shadow（文字阴影）

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

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

• blur：模糊距离（可选）

• color：阴影颜色（可选）

• 属性：text-shadow: h-shadow v-shadow blur color;

• 用法：

  h1 {
    text-shadow: 2px 2px 4px #000000;
  }

• 示例：

  /* 基本文字阴影 */
  .text1 {
    text-shadow: 1px 1px 2px black;
  }
  
  /* 多重文字阴影 */
  .text2 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
  }
  
  /* 浮雕效果 */
  .text3 {
    text-shadow: -1px -1px 0 white, 1px 1px 0 #333;
  }