使用CSS3中gradient属性做出背景渐变效果的方法

这篇文章主要介绍使用CSS3中gradient属性做出背景渐变效果的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

专注于为中小企业提供成都网站设计、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业繁昌免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了成百上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

背景渐变是一个很好的的特效，那么如何去利用CSS3去做这个效果呢，今天将为大家分享CSS3渐变，CSS3渐变是向图像模块中添加的新类型的图像。CSS3渐变允许在两个或多个指定颜色之间显示平滑过渡。

浏览器支持两种类型的渐变：

linear, 用linear-gradient()函数定义,

radial, 用radial-gradient()函数定义.

使用过程中注意浏览器的兼容问题

Safari ， Chrome ：-webkit-linear-gradient

Firefox ：-moz-linear-gradient

IE ：-ms-linear-gradient

Opera：-o-linear-gradient

本篇文章将以Chrome 浏览器为例进行讲解

线性渐变

要创建线性渐变，将起点和方向设置为角度，还要定义颜色停止必须指定至少两个停止颜色。

从顶部到底部的线性渐变

div{
  /* 倒退 */
width:200px;
height:200px;
background-color: #1a82f7;
background-repeat: repeat-x;
background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
}

使用CSS3中gradient属性做出背景渐变效果的方法

从左到右的渐变过程

 div{
  /* 倒退 */
width:200px;
height:200px;
background-color: #1a82f7;
background-repeat: repeat-x;
background: -webkit-linear-gradient(left, #2F2727, #1a82f7);
}

使用CSS3中gradient属性做出背景渐变效果的方法

线性渐变（偶数停顿）

div{
 background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);}

使用CSS3中gradient属性做出背景渐变效果的方法

径向渐变

径向渐变由它的中心定义，必须至少定义两种颜色结点，还可以指定渐变的中心、形状（圆形或椭圆形）、大小，默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

居中径向渐变

div{
width:500px;
height:100px;
background-color: #2F2727;
background-position: center center;
background-repeat: no-repeat;
 background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
}

使用CSS3中gradient属性做出背景渐变效果的方法

自定义径向渐变

closest-side：最近端， closest-corner：最近角

div{
width:500px;
height:100px;
background-color: #2F2727;
background-position: 80% 20%;//自己自定义位置
background-repeat: no-repeat;
 background: -webkit-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
}

使用CSS3中gradient属性做出背景渐变效果的方法

以上是使用CSS3中gradient属性做出背景渐变效果的方法的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

标题名称：使用CSS3中gradient属性做出背景渐变效果的方法
网页路径：http://scjbc.cn/article/gicedj.html

使用CSS3中gradient属性做出背景渐变效果的方法

其他资讯