CSS3-线性渐变

Myth丶恋晨 2023-07-02 04:24 121阅读 0赞

CSS 通过 `linear-grandient()` 函数来创建一个表示两种或多种颜色的线性渐变的“图像”；其结果属于 <gradient> 数据类型，是一种特别的 <image>数据类型。

语法：

*  `direction` 渐变的方向 `to + 方向(top、right、bottom、left)` 或角度 `0deg~360deg`；to top, to bottom, to left 和 to right 这些值会被转换成角度0度、180度、270度和90度。
 *  `color-stop` 渐变的起止颜色；至少要有两种颜色

渐变从上到下：

div{ 
    	width: 200px;
    	height: 50px;
    	border: 1px solid gray;
    	/*为了创建一个线性渐变，需要设置一个起始点和一个方向（指定为一个角度）的渐变效果；还要定义终止色，终止色就是想让Gecko去平滑的过渡，并且必须指定至少两种。*/
    	background-image: linear-gradient(yellow, blue); /*不写角度时默认为 180deg(从上到下)*/
    }

HTML:

![在这里插入图片描述][20200126103316597.png]  
渐变从下到上：

/*设置渐变从下到上 等价于 to top*/
    background-image: linear-gradient(0, yellow, blue);

![在这里插入图片描述][20200126104034738.png]

多个起止值:

/*设置渐变从左到右 等价于 to right*/
    background-image: linear-gradient(90deg, red, green, blue);

![在这里插入图片描述][20200126104655216.png]  
可以设置起止值的范围：

![在这里插入图片描述][20200126105215646.png]  
当最后一个颜色范围小于前一个颜色范围时，默认填充剩余空间(范围值失效)：

![在这里插入图片描述][20200126110407824.png]

中间颜色的范围取决于前后颜色范围值的差(可能为零)：

![在这里插入图片描述][20200126110726591.png]

CSS3 提供了实现重复线性渐变的函数 `repeating-linear-gradient()` 语法与 `linear-gradient()` 相同

![在这里插入图片描述][20200129164653338.png]

[20200126103316597.png]: https://img-blog.csdnimg.cn/20200126103316597.png
[20200126104034738.png]: https://img-blog.csdnimg.cn/20200126104034738.png
[20200126104655216.png]: https://img-blog.csdnimg.cn/20200126104655216.png
[20200126105215646.png]: https://img-blog.csdnimg.cn/20200126105215646.png
[20200126110407824.png]: https://img-blog.csdnimg.cn/20200126110407824.png
[20200126110726591.png]: https://img-blog.csdnimg.cn/20200126110726591.png
[20200129164653338.png]: https://img-blog.csdnimg.cn/20200129164653338.png