css中颜色渐变的实现方法有哪些
这篇文章将为大家详细讲解有关css中颜色渐变的实现方法有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
成都创新互联专注于企业营销型网站、网站重做改版、鼓楼网站定制设计、自适应品牌网站建设、H5开发、商城建设、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为鼓楼等各大城市提供网站开发制作服务。
!!注意IE9及之前的版本不支持渐变。Safari要加-webkit-的前缀,Opera要加-o-的前缀,Firefox要加-moz-的前缀!
一、Linear Gradients(线性渐变)-向下/向上/向左/向右/对角方向
1.向下代码
渐变学习
运行效果:
2.向上,换向下渐变的两个颜色顺序即可。替换上面代码运行结果为:
5.对角方向
渐变学习
运行结果:
注意:方向词写法遵循上下左右的按浏览器顺序第一项写起始位置,后三项写到达位置,第四项为标准项要加to;要注意的是左上left top 对应的到达项为bottom right。
二、角度渐变
1、以上上下左右对角渐变通通可以通过角度渐变写出来。在表示颜色的括号第一项加上角度比如0deg,45deg,90deg,180deg等角度即可。
2、角度是指渐变方向和水平线之间的角度,逆时针方向计算,比如:0deg是指从下到上的渐变,90deg是指从左到右的渐变。
3、对于Chrome,Safari,Firefox等换算公式为90-x=y,X为标准度数。
三、多个颜色节点:即在表示方向颜色的括号里加多几种颜色就好,写法还是遵循以上先写方向再写颜色。
四、带有透明度的渐变:即用rgba(0,0,0,0.2)表示颜色,其中0.2表示透明度。
五、重复的线性渐变:用repeating-linear-gradient()函数,括号内每个颜色规定渐变比例。
六、Radial Gradient径向渐变
1、径向渐变:可以指定渐变的中心,形状(圆形circle或椭圆),大小size(closest-side;farthest-side;closest-coner;farthest-corner)。默认中心为center,形状为ellipse(椭圆),渐变大小是farthest-corner(到最远角落)。语法:background:-radial-gradient(center,shape,size,start-color,...,last-clor)。
2、颜色节点不均匀分布的径向渐变:即规定每个颜色不通的比例。
3、重复的径向渐变:使用repeating-radial-gradient()函数。每个颜色设置比例。
关于css中颜色渐变的实现方法有哪些就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
当前名称:css中颜色渐变的实现方法有哪些
文章分享:http://scyanting.com/article/ghiggo.html