css3中设置阴影的属性是

参考资料

1. css阴影效果代码
2. CSS定位详细说明以及案例
3. 结构伪类选择器详细说明以及案例
4. CSS阴影颜色
5. 伪类选择器详细说明以及案例
6. 有没有推荐的 CSS 过渡动画库？
7. 如何调试Flex布局问题？
8. css如何居中一个div

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;
  }