css中背景颜色线性渐变和径向渐变效果的示例分析
发布时间：-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线性渐变案例
举例：从左下角至右上角，从红色到蓝色的渐
效果图：
代码：html>
div{
width:400px;
height:200px;
background:-webkit-linear-gradient(leftbottom,red,blue);
background:-o-linear-gradient(leftbottom,red,blue);
background:-moz-linear-gradient(leftbottom,red,blue);
background:linear-gradient(leftbottom,red,blue);
}
二、径向渐变(radial-gradient)
CSS3径向渐变是圆形或椭圆形的渐变。颜色不再沿着一条直线轴变化，而是从一个起点向所有方向发射。它比线性渐变更复杂。
可以定义它的中心(默认渐变是中心是center)、形状(原型或者椭圆形)、大小等。
语法：background: radial-gradient(position,shape，size,start-color,last-color)
position
：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。
：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。
left：设置左边为径向渐变圆心的横坐标值。
center：设置中间为径向渐变圆心的横坐标值或纵坐标。
right：设置右边为径向渐变圆心的横坐标值。
top：设置顶部为径向渐变圆心的纵标值。
bottom：设置底部为径向渐变圆心的纵标值。
shape
可以是值 circle 或 ellipse。circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
size
closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；
farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角；默认值
css径向渐变案例
举例：从60%，55%的位置开始渐变，指定径向渐变的半径长度为从圆心到离圆心最近的边，从内向外渐变颜色为blue,green,yellow,black
效果图：
代码：html>
div{
width:400px;
height:200px;
background:-webkit-radial-gradient(60%55%,closest-side,blue,green,yellow,black);
background:-o-radial-gradient(60%55%,closest-side,blue,green,yellow,black);
background:-moz-radial-gradient(60%55%,closest-side,blue,green,yellow,black);
background:radial-gradient(60%55%,closest-side,blue,green,yellow,black);
}
关于“css中背景颜色线性渐变和径向渐变效果的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
