css3中设置阴影的属性是

参考资料

1. 动态伪类选择器详细说明以及案例
2. 层次/关系选择器详细说明以及案例
3. 详细说明Flexbox基础属性
4. css3阴影效果
5. 几种常用的 CSS 横向布局方法
6. Vanta.js 如何与 CSS 过渡结合？
7. CSS格式化/压缩有哪些
8. display: flex/inline-flex示例

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

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