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

发布时间:2020-08-29 14:15:06 作者:小新
来源:亿速云 阅读:188

这篇文章主要介绍使用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属性做出背景渐变效果的方法的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. css3使用animation属性如何实现背景颜色动态渐变的效果
  2. CSS3使用linear-gradient实现线性渐变效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

gradient gr

上一篇:css3中animation动画属性的使用方法

下一篇:vue将对象新增的属性添加到检测序列的方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》