移动端背景渐变，非常的年轻，符合90后年轻一代的审美，css3的这个渐变目前主要是应用在手机前端领域。

产品设计中使用渐变色的好处：
1：观众不至于眼睛过于疲劳（如果是浅色背景，3个小时下来极容易造成观众闭上眼睛还有残影，眼睛会极度疲劳）。
2：优雅而低调的深浅色调:
3：纯色单调 渐变色一是色彩不单调 二是在有限空间内尽可能制造空间感
4：稍微加点渐变可以让纯色层显得更细腻，不那么单调。画面显得更丰富。
代码如下，非常简单

新的梯度渐变语法，新的语法包含四个渐变函数：

    linear-gradient()： 线性梯度渐变

    radial-gradient()： 径向梯度渐变

    repeating-linear-gradient()：重复梯度渐变

    repeating-radial-gradient()：色站

一：线性渐变 linear-gradient()： 线性梯度渐变

图片.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径向渐变

图片.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()：重复梯度渐变

图片.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()：色站

图片.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后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

文末福利：关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源200G干货大全。公众号回复“1”，拉你进程序员技术讨论群

移动开发之css3实现背景几种渐变效果的更多相关文章

  1. 移动开发之css3实现背景渐变效果

    前段时间由于手机项目需要实现一个背景渐变功能,  开始是想切个小背景图平铺下,  后来想到css3可以实现,如是用下面的代码就实现了. .sec_case_list li  span{ backgro ...

  2. Android开发之onClick事件的三种写法

    package a.a; import android.app.Activity; import android.os.Bundle; import android.view.View; import ...

  3. Android开发之onClick事件的三种写法(转)

    package a.a; import android.app.Activity; import android.os.Bundle; import android.view.View; import ...

  4. 桌面应用开发之WPF动态背景

      因为项目需要,在WPF开发的桌面应用中,登陆页面需使用动态背景.由于没有前端开发人员,所以由半吊子的后端开发人员根据效果图写前端xaml.去掉页面上边框,抽离动态背景设置代码: <Windo ...

  5. iOS开发之WIFI,3G/4G两种网络同时使用技巧

    最近遇到一个比较奇葩的需求:App与硬件通过WiFi LAN通信, 同时App需要与服务器通过3G/4G WAN通信,如下图: 众所周知,手机同时打开WiFi和3G时候,会优先走WiFi.这个该如何实 ...

  6. web 开发之js---ajax 中的两种提交方式ajax post 和 ajax get 实例

    ()post http://04101334.iteye.com/blog/637695/ ()get function serializeElement(element) { var method ...

  7. web 开发之js---ajax 中的两种返回状态 xmlhttp.status和 xmlhttp.readyState

    (1)xmlhttp.status xmlHttp.status的值(HTTP状态表)0**:未被始化 1**:请求收到,继续处理 2**:操作成功收到,分析.接受 3**:完成此请求必须进一步处理 ...

  8. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

  9. 【Android UI】Android开发之View的几种布局方式及实践

    引言 通过前面两篇: Android 开发之旅:又见Hello World! Android 开发之旅:深入分析布局文件&又是“Hello World!” 我们对Android应用程序运行原理 ...

随机推荐

  1. Kinect 开发 —— 常见手势识别（下）

    划动(Swipe) 划动手势和挥手(wave)手势类似.识别划动手势需要不断的跟踪用户手部运动,并保持当前手的位置之前的手的位置.因为手势有一个速度阈值,我们需要追踪手运动的时间以及在三维空间中的坐标 ...

  2. Checkpoint & cache & persist

    checkpoint checkpoint(检查点)是Spark为了避免长链路,大计算量的Rdd不可用时,需要长时间恢复而引入的.主要就是将通过大量计算而获得的这类Rdd的数据直接持久化到外部可靠的存 ...

  3. 数据结构（C实现）------- 单链表

    在单链表中,每个结点包括两部分:存放每个数据元素本身信息的数据域和存放其直接后继存储位置的指针域. 单链表结点的类型描写叙述: typedef int ElemType; typedef struct ...

  4. 【开卷故意】JAVA正則表達式模版

    专业既然是机器学习.那工作肯定也是继续和数据打交道,那么问题来了,非常多时候推荐算法和数据挖掘算法都是现成可用的,平台初建,重点还在数据过滤和抽取.如何高效的抽取数据? 利用往常算法比赛中经常使用的字 ...

  5. 11lession-class 类

    python既然也是面向对象编程的语言,自然也就跟java相似,它也有类的概念.今天就简单学习下.看如下代码 #!/usr/bin/python class cl_test: test = 0 def ...

  6. 新手前端笔记之--初识html标签

    接触前端(好大气的名字啊)已经一个多月了,看了很多视频和博客,有了一定的感性认识,但还是需要总结一下以便系统化所学习的知识,就从html标签开始吧.关于标签,谈论最多的就是简洁和语义化.简洁指html ...

  7. 上传excel数据到数据库中

    上传excel表格数据到数据库 导入固定路径下的excel数据到数据库 <form id="disposeFlightDataForm" action="../up ...

  8. iOS关闭键盘简单实现(objc/swift)

    Objective-C 代码实例方式一 [[[UIApplication sharedApplication] keyWindow] endEditing:YES]; 假设一个view上有很多Text ...

  9. Objective-C - 类的静态常量

    创建头文件(.h), 导出常量: // Constants.h FOUNDATION_EXPORT NSString *const MyFirstConstant; FOUNDATION_EXPORT ...

  10. 26.SpringBoot事务注解详解

    转自:https://www.cnblogs.com/kesimin/p/9546225.html @Transactional spring 事务注解 1.简单开启事务管理 @EnableTrans ...