H5 css3渐变

Posted 2021-11-28 txf-123

---恢复内容开始---

1. 渐变 gradients

水平渐变 linear gradients

语法  background:linear-gradient(direction，color1，color2，……)

Direction

1. 这个参数可以省略 如果省略了默认方向是从上到下
2. 这个参数如果不省略 写方向的起始值 top(从上到下) left(从左到右) right(从右到左)
3. 如果这个参数不省略 这个属性前面需要加前缀或者是 to 终点方向

 

1. 对角渐变

 

1. 角度 deg  0代表从下到上 90deg代表从左到右，

 

1. 渐变的过程

 

0% 在0%处 是纯红色  20%是纯蓝色  如果最后一个值不是100% 代表从这个值到100%都是纯orange，如果最后一个值是100% 在100%处是纯橙色。

在起点如果不是0 是10% 从0到10%处都是纯红色

径向渐变radial gradients

起点是中心点，向四周渐变

Background:radial-gradient(shape,color,color)

 

1. Shape

参数可以省略 如果省略默认是ellipse椭圆形 还有个值是circle 代表圆

1. 渐变过程

0% 在0%处 是纯红色  20%是纯蓝色  如果最后一个值不是100% 代表从这个值到100%都是纯orange，如果最后一个值是100% 在100%处是纯橙色。

在起点如果不是0 是10% 从0到10%处都是纯红色