html背景色线性渐变,css中背景颜色线性渐变和径向渐变效果的示例分析

css中背景颜色线性渐变和径向渐变效果的示例分析

发布时间：2021-06-04 14:00:26

来源：亿速云

阅读：80

作者：小新

这篇文章将为大家详细讲解有关css中背景颜色线性渐变和径向渐变效果的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

一、线性渐变(linear-gradient)

实现线性渐变，至少需要定义两种颜色，这两种颜色就是你想平稳过渡的颜色，即：其中一种颜色为起点，另一种颜色为结束点。

语法：

background: linear-gradient(colorA,colorB)

colorA为起点颜色，colorB为结束点颜色。

还可以定义渐变的方向，是从上到下渐变，还是从左至右渐变，又或者是从左上角至右下角渐变(默认情况下是从上至下渐变的)。

语法：

background: linear-gradient(direction,colroA,colorB)

direction表示渐变的方向，直接写方向的起点即可，比如：渐变方向为从左至右，直接写left即可；渐变方向为从下至上，直接写bottom即可；渐变方向从左上角至右下角，书写为background: linear-gradient(left top,colorA,colorB)。

css线性渐变案例

举例：从左下角至右上角，从红色到蓝色的渐

效果图：