css如何实现背景颜色线性渐变和径向渐变效果

2023-07-05 00:07:57 890人浏览安东尼

摘要

这篇文章主要介绍了CSS如何实现背景颜色线性渐变和径向渐变效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇css如何实现背景颜色线性渐变和径向渐变效果文章都会有所收获，下面我们一起来看看吧。一、线性渐变（li

这篇文章主要介绍了CSS如何实现背景颜色线性渐变和径向渐变效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇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线性渐变案例

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

代码：

<!DOCTYPE html><html> <head>  <meta charset="utf-8" />  <title></title>  <style type="text/css">   div{    width: 400px;    height: 200px;    background: -WEBkit-linear-gradient(left bottom,red,blue);    background: -o-linear-gradient(left bottom,red,blue);    background: -moz-linear-gradient(left bottom,red,blue);    background: linear-gradient(left bottom,red,blue);   }  </style> </head> <body>  <div></div> </body></html>

二、径向渐变（radial-gradient）

css3径向渐变是圆形或椭圆形的渐变。颜色不再沿着一条直线轴变化，而是从一个起点向所有方向发射。它比线性渐变更复杂。

可以定义它的中心(默认渐变是中心是center)、形状（原型或者椭圆形）、大小等。

语法：background: radial-gradient(position,shape，size,start-color,last-color)

position
<length>：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。
<percentage>：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。
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

代码：

<!DOCTYPE html><html> <head>  <meta charset="utf-8" />  <title></title>  <style type="text/css">   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);   }  </style> </head> <body>  <div></div> </body></html>

关于“css如何实现背景颜色线性渐变和径向渐变效果”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“css如何实现背景颜色线性渐变和径向渐变效果”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: css如何实现背景颜色线性渐变和径向渐变效果

本文链接: https://www.lsjlt.com/news/348459.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341