移动端背景渐变,非常的年轻,符合90后年轻一代的审美,css3的这个渐变目前主要是应用在手机前端领域。
产品设计中使用渐变色的好处:
1:观众不至于眼睛过于疲劳(如果是浅色背景,3个小时下来极容易造成观众闭上眼睛还有残影,眼睛会极度疲劳)。
2:优雅而低调的深浅色调:
3:纯色单调 渐变色一是色彩不单调 二是在有限空间内尽可能制造空间感
4:稍微加点渐变可以让纯色层显得更细腻,不那么单调。画面显得更丰富。
代码如下,非常简单
新的梯度渐变语法,新的语法包含四个渐变函数:
linear-gradient(): 线性梯度渐变
radial-gradient(): 径向梯度渐变
repeating-linear-gradient():重复梯度渐变
repeating-radial-gradient():色站
一:线性渐变 linear-gradient(): 线性梯度渐变
![](https://i-blog.csdnimg.cn/blog_migrate/0a2142409b6d847cc6eb15186c1ff3c6.webp?x-image-process=image/format,png)
图片.png
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>移动开发之css3实现背景渐变效果</title>
<style type="text/css">
.linear{
/*仿支付宝背景蓝色渐变*/
background-image: linear-gradient(to top, #66b7f9,#1c82d4);
height: 15rem;
}
</style>
</head>
<body>
<div class="linear"></div>
</body>
</html>
二:radial-gradient径向渐变
![](https://i-blog.csdnimg.cn/blog_migrate/2b69eea3fbf7c6026c4fefbbd606c5b5.webp?x-image-process=image/format,png)
图片.png
代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>移动开发之css3实现背景渐变效果</title>
<style type="text/css">
.linear{
/*background-image: linear-gradient(to top, #66b7f9,#1c82d4);*/
background: radial-gradient(#ffffff,#1c82d4);
height: 15rem;
}
</style>
</head>
<body>
<div class="linear"></div>
</body>
</html>
三: repeating-linear-gradient():重复梯度渐变
![](https://i-blog.csdnimg.cn/blog_migrate/fb1ddecc056a6572ee0de39aa2af3f6d.webp?x-image-process=image/format,png)
图片.png
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>移动开发之css3实现背景渐变效果</title>
<style type="text/css">
.linear{
background: repeating-linear-gradient(#1c82d4, #fff 30%, #1c82d4 35%);
height: 15rem;
}
</style>
</head>
<body>
<div class="linear"></div>
</body>
</html>
四:repeating-radial-gradient():色站
![](https://i-blog.csdnimg.cn/blog_migrate/731d93ef0c5e5f265e91c2989e0b3f2c.webp?x-image-process=image/format,png)
图片.png
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>移动开发之css3实现背景渐变效果</title>
<style type="text/css">
.linear{
background: repeating-radial-gradient(#1c82d4, #fff 30%, #1c82d4 35%);
height: 15rem;
}
</style>
</head>
<body>
<div class="linear"></div>
</body>
</html>
/全兼容的移动端渐变写法/
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #66b7f9,#1c82d4);
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear,top,from(#66b7f9),to(#1c82d4));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(top, #66b7f9, #1c82d4);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #66b7f9, #1c82d4);
/* default */
background: linear-gradient(top, #66b7f9, #1c82d4);
background-color: #1c82d4;
原文作者:祈澈姑娘
原文链接:https://www.jianshu.com/u/05f416aefbe1
创作不易,转载请告知
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
有个很难涨粉的的公众号叫:【编程微刊】