css中颜色渐变的实现方法有哪些

这篇文章将为大家详细讲解有关css中颜色渐变的实现方法有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联专注于企业营销型网站、网站重做改版、鼓楼网站定制设计、自适应品牌网站建设、H5开发、商城建设、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为鼓楼等各大城市提供网站开发制作服务。

！！注意IE9及之前的版本不支持渐变。Safari要加-webkit-的前缀，Opera要加-o-的前缀，Firefox要加-moz-的前缀！

一、Linear Gradients(线性渐变)-向下/向上/向左/向右/对角方向

1.向下代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>渐变学习</title>
<style>
div{
    width:200px;
    height:200px;
    }
.gradient{
 background:-webkit-linear-gradient(#8A2BE2,#DC143C);/*for safari5.1-6.0*/
 background:-o-linear-gradient(#8A2BE2,#DC143C);/*Opera 11.1-12.0*/
 background:-moz-linear-gradient(#8A2BE2,#DC143C);/*firefox 3.6-15*/
 background:linear-gradient(#8A2BE2,#DC143C);/*标准语法，必须放在最后*/
    }
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>

运行效果：

css中颜色渐变的实现方法有哪些

2.向上，换向下渐变的两个颜色顺序即可。替换上面代码运行结果为：

css中颜色渐变的实现方法有哪些

5.对角方向

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>渐变学习</title>
<style>
div{
    width:200px;
    height:200px;
    }
.gradient{
 background:-webkit-linear-gradient(left top,#8A2BE2,#DC143C);/*for safari5.1-6.0*/
 background:-o-linear-gradient(bottom right,#8A2BE2,#DC143C);/*Opera 11.1-12.0*/
 background:-moz-linear-gradient(bottom right,#8A2BE2,#DC143C);/*firefox 3.6-15*/
 background:linear-gradient(to bottom right,#8A2BE2,#DC143C);/*标准语法*/
    }
</style>
</head>
<body>
<div class="gradient"></div>
</body>
</html>

运行结果：

css中颜色渐变的实现方法有哪些

注意：方向词写法遵循上下左右的按浏览器顺序第一项写起始位置，后三项写到达位置，第四项为标准项要加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中颜色渐变的实现方法有哪些
当前路径：https://www.cdcxhl.com/article10/ghiggo.html

成都网站建设公司_创新互联，为您提供网站设计公司、全网营销推广、营销型网站建设、企业网站制作、标签优化、网站收录

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容