H5 css3渐变

寻技术 Html/CSS 2023年07月11日 74

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

  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% 从到10%处都是纯红色

径向渐变radial gradients

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

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

 

  1. Shape

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

  1. 渐变过程

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

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

关闭

用微信“扫一扫”