1、渐变色
渐变 gradients
水平渐变 linear gradients
语法 background:linear-gradient(direction,color1,color2,……)
Direction
这个参数可以省略 如果省略了默认方向是从上到下
这个参数如果不省略 写方向的起始值 top(从上到下) left(从左到右) right(从右到左)
如果这个参数不省略 这个属性前面需要加前缀或者是 to 终点方向
对角渐变
角度 deg 0代表从下到上 90deg代表从左到右,
渐变的过程
0% 在0%处 是纯红色 20%是纯蓝色 如果最后一个值不是100% 代表从这个值到100%都是纯orange,如果最后一个值是100% 在100%处是纯橙色。
在起点如果不是0 是10% 从0到10%处都是纯红色
径向渐变radial gradients
起点是中心点,向四周渐变
Background:radial-gradient(shape,color,color)
Shape
参数可以省略 如果省略默认是ellipse椭圆形 还有个值是circle 代表圆
渐变过程
0% 在0%处 是纯红色 20%是纯蓝色 如果最后一个值不是100% 代表从这个值到100%都是纯orange,如果最后一个值是100% 在100%处是纯橙色。
在起点如果不是0 是10% 从0到10%处都是纯红色
如
/*background: linear-gradient(to bottom, #FFC0C0, #FF8D8D);*/
/*background: linear-gradient(to top, #000000 0%,#ffffff 100%);*/
/*background-image: linear-gradient(0deg, #FFC0C0 0%, #FF8D8D 100%);*/
background-image: linear-gradient(0deg, #00DCFF 0%, #00B6FF 100%);