css背景渐变 学习随手记

CSS背景渐变

CSS渐变分为两种
分别是：
线性渐变：linear-gradient
径向渐变：radial-gradient

1 线性渐变

线性渐变语法：background-image: linear-gradient( ，);
括号内添加颜色，用“，”隔开。线性渐变颜色默认从上向下渐变。

线性渐变实例演示

首先，在文档中写一个div容器并给他设置好宽高以及位置。
然后再他的CSS中添加线性渐变，添加红色和蓝色两个颜色。

效果如下图所示

颜色可以设置多个

如何更改角度？

线性渐变中渐变的角度是可以自行更改的，
在颜色前面加上角度就可以更改线性渐变的方向。
注：角度是0deg在容器的最下面bottom位置。正数就是顺时针旋转。

如图所示


这是45°顺时针渐变的效果。


如上图所示添加的度数为负数时，颜色按逆时针渐变。

如何更改渐变范围大小

在颜色后面添加百分比，能够更改颜色渐变过渡的起点。

代码如图

效果如图


如代码所示，我们给蓝色后面添加一个20%，给粉色添加一个50%。
那么颜色会从蓝色的20%开始过渡到粉色的50%结束。

2 径向渐变

径向渐变与线性渐变的区别是，径向渐变是从一个点向四周渐变。
镜像渐变写法如下图所示

径向渐变效果图

在径向渐变的颜色后添加百分比属性，也是可以更改颜色的渐变区域的。


相比较线性渐变来说，径向渐变使用的比较少。