目录

1.rgba(透明度)

案例: 为图片添加蓝色的滤镜

1. 代码

2. 效果 

2.opacity 属性

案例: 组件以及字组件设置统一的透明度

1. 代码

2. 效果

3.border-radius 圆角

案例: 设置一张图片边框为圆角

1. 代码

2. 效果

案例: 设置一张图片的边框为圆形

1. 代码

2. 效果

4. 边框图片

案例: 为边框设置背景图片

1. 代码

2. 效果

5. 阴影 box-shadow

案例: 为盒子添加阴影

1. 代码

2. 效果

6. 渐变 linear-gradient

案例: 添加渐变背景色

1. 代码

2. 效果

7. 径向渐变  radial-gradient

参数说明

案例: 添加径向渐变色

1. 代码

2. 效果

8. 重复渐变 repeating-linear-gradient

参数说明

案例: 添加水平条纹

1. 代码

2. 效果

案例: 添加垂直条纹

1. 代码

2. 效果

9. 重复径向渐变

案例: 制作一个靶子

1. 代码

2. 效果

10. 多背景图片

案例: 多背景图片

1 代码

2. 效果

11. 设置背景图片的大小 backgroud-size

参数说明

案例:50% 图片填充背景图

1. 代码

2. 效果

12. 设置背景图像的显示区域 background-origin

参数说明

案例: 以内边距为起始位置设置一张背景图片

1. 代码

2. 效果

13. 设置背景图的裁剪区域 background-clip

参数说明

案例: 以边框为起始位置设置一张图片

1. 代码

2. 效果

14.display 属性说明

参数说明

---

1.rgba(透明度)

        rgba() 是一种颜色值，它允许你指定一个带有透明度的颜色。格式是 rgba(red, green, blue, alpha)，其中 red, green, blue 的取值范围是 0 到 255（或者使用百分比），而 alpha 值从 0.0（完全透明）到 1.0（完全不透明）

案例: 为图片添加蓝色的滤镜

注：通过 rgba()的第四个参数 alpha 为某个组件设置透明度

1. 代码

    
    
    

    


    
原始图片
    

    

    
为图片添加一层蓝色的滤镜
    

        

    
    
    

2. 效果 

可以看到下面的图片明显有一层蓝色的滤镜效果

2.opacity 属性

        opacity 控制元素及其子元素的不透明度。取值范围为 0（完全透明）到 1（完全不透明）。与 rgba 不同，opacity 会影响整个元素，包括其内容

案例: 组件以及字组件设置统一的透明度

1. 代码

    
    
    
    


    
原始图片
    

    

    
未设置全局的透明度
    

        

    
    
设置统一的透明度