参考资料

1. div居中样式
2. 如何添加按钮的过渡动画效果？
3. Flexbox 布局有哪些高级用法？
4. CSS尺寸属性详细说明以及案例
5. display: flex/inline-flex示例
6. css中设置div居中
7. CSS格式化/压缩有哪些
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

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

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