参考资料

1. 详细说明：justify-content: flex-start/end
2. Flexbox布局有哪些常见的误区？
3. 有没有推荐的 CSS 过渡动画库？
4. CSS尺寸属性详细说明以及案例
5. css中设置div居中
6. 动态伪类选择器详细说明以及案例
7. 后代选择器详细说明以及案例
8. display: flex/inline-flex示例

css阴影效果属性

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