参考资料

1. css阴影效果属性
2. Flex布局如何优化页面加载速度？
3. CSS格式化/压缩有哪些
4. Flex布局在动画制作中的应用？
5. 使用CSS Grid和Flexbox两种现代布局方式实现4列12个产品布局的方法
6. CSS3 阴影
7. 动态伪类选择器详细说明以及案例
8. CSS尺寸属性详细说明以及案例

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

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

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