H5 css3渐变

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

  1. 渐变 gradients

水平渐变 linear gradients

语法  background:linear-gradient(directioncolor1color2,……)

Direction

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

 

  1. 对角渐变

 

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

 

  1. 渐变的过程

 

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

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

径向渐变radial gradients

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

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

 

  1. Shape

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

  1. 渐变过程

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

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

猜你喜欢

转载自www.cnblogs.com/txf-123/p/10827413.html