首页 / CSS / css背景颜色渐变案例：线性渐变和径向渐变效果实例详解

css背景颜色渐变案例：线性渐变和径向渐变效果实例详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css背景颜色渐变案例：线性渐变和径向渐变效果实例详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3181字，纯文字阅读大概需要5分钟。

内容图文

渐变是两种或多种颜色之间的平滑过渡。以前，必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。渐变又分为线性渐变和径向渐变两种。以下是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线性渐变案例

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

效果图：

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

效果图：

css背景颜色渐变案例：线性渐变和径向渐变效果实例详解 - 文章图片

代码：

<!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背景颜色渐变案例：线性渐变和径向渐变效果实例详解的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的css背景颜色渐变案例：线性渐变和径向渐变效果实例详解全部内容，希望文章能够帮你解决css背景颜色渐变案例：线性渐变和径向渐变效果实例详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/411518.html

来源：【匿名】