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线性渐变案例
举例:从左下角至右上角,从红色到蓝色的渐
效果图: