参考资料

1. 几种常用的 CSS 横向布局方法
2. css如何居中一个div
3. 伪元素选择器详细说明以及案例
4. 详细说明：justify-content: flex-start/end
5. Flex布局与Grid布局的对比？
6. css3中设置阴影的属性是
7. 类选择器详细说明以及案例
8. css文字阴影属性

CSS阴影透明度设置

基本属性

CSS中设置阴影透明度的主要方式是通过box-shadow和text-shadow属性的RGBA颜色值中的alpha通道来控制。

box-shadow属性

语法：

box-shadow: h-offset v-offset blur spread color inset;

其中color部分可以使用RGBA格式来设置透明度：

• R: 红色值 (0-255)

• G: 绿色值 (0-255)

• B: 蓝色值 (0-255)

• A: 透明度 (0-1)

text-shadow属性

语法：

text-shadow: h-offset v-offset blur color;

同样可以通过RGBA颜色值设置透明度。

用法示例

1. 半透明黑色阴影：

.box {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

2. 半透明蓝色文本阴影：

.text {
  text-shadow: 2px 2px 4px rgba(0, 0, 255, 0.3);
}

3. 多重阴影效果：

.element {
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.1);
}

4. 彩色半透明阴影：

.card {
  box-shadow: 0 4px 8px rgba(255, 105, 180, 0.3);
}

注意事项

• 透明度值范围是0(完全透明)到1(完全不透明)

• 可以使用HSLA颜色格式替代RGBA

• 透明度会影响阴影与背景的混合效果

• 多个阴影叠加时透明度会累积