css阴影效果属性

参考资料

1. CSS有哪些常用的选择器？
2. 如何避免Flex容器高度塌陷？
3. css布局格式
4. display: flex/inline-flex示例
5. Flex布局在动画制作中的应用？
6. 有没有推荐的 CSS 过渡动画库？
7. CSS 阴影边框设置
8. css样式div居中

CSS 阴影效果属性

1. box-shadow 属性

• 用于为元素添加阴影效果

• 语法：box-shadow: h-shadow v-shadow blur spread color inset;

• 参数：

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

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

• blur：模糊距离（可选）

• spread：阴影尺寸（可选）

• color：阴影颜色（可选）

• inset：将外部阴影改为内部阴影（可选）

2. text-shadow 属性

• 用于为文本添加阴影效果

• 语法：text-shadow: h-shadow v-shadow blur color;

• 参数：

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

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

• blur：模糊距离（可选）

• color：阴影颜色（可选）

用法示例：

1. box-shadow 示例：
   /* 基本阴影 */
   .box {
    box-shadow: 5px 5px 10px #888;
   }

/* 内阴影 */
.box-inset {
 box-shadow: inset 0 0 10px #000;
}

/* 多重阴影 */
.box-multi {
 box-shadow: 5px 5px 5px #f00, -5px -5px 5px #0f0;
}

2. text-shadow 示例：
   /* 基本文本阴影 */
   .text {
    text-shadow: 2px 2px 4px #000;
   }

/* 模糊文本阴影 */
.text-blur {
 text-shadow: 0 0 8px #f00;
}

/* 多重文本阴影 */
.text-multi {
 text-shadow: 1px 1px 2px #000, 0 0 1em #00f;
}

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