css的渐变效果

目录

1.线性渐变

1.从上到下的渐变

2. 从左到右的渐变

3.对角线渐变

4.使用角度的渐变

 5.使用多个色标

6.使用透明度 

7.重复线性渐变

 2.径向渐变

1.均匀间隔的色标（默认）

 2.不同间距的色标

3.设置形状

 4.使用大小不同的关键字

5.重复径向渐变

---

1.线性渐变

1.从上到下的渐变

2. 从左到右的渐变

3.对角线渐变

4.使用角度的渐变

取代预定义的方向（向下、向上、向右、向左、向右下等等）。值 0deg 等于向上（to top）。值 90deg 等于向右（to right）。值 180deg 等于向下（to bottom）。

 5.使用多个色标

6.使用透明度 

如需添加透明度，我们使用 rgba() 函数来定义色标。 rgba() 函数中的最后一个参数可以是 0 到 1 的值，它定义颜色的透明度：0 表示全透明，1 表示全彩色（无透明）。

7.重复线性渐变

用repeating-linear-gradient()属性

 2.径向渐变

语法格式：

        background-image: radial-gradient(shape size at position, start-color, ..., last-color);

默认地，shape 为椭圆形，size 为最远角，position 为中心。

1.均匀间隔的色标（默认）

 2.不同间距的色标

3.设置形状

用shape 定义形状。

 circle 或 ellipse 值。默认值为 ellipse（椭圆）。

 

 4.使用大小不同的关键字

用size属性

• closest-side
• farthest-side
• closest-corner
• farthest-corner（默认）

5.重复径向渐变

用repeating-radial-gradient() 属性