移动端背景渐变，非常的年轻，符合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. ssh-keygen && ssh-copy-id 生成管理传输秘钥

  2. lastlog---显示系统中所有用户最近一次登录信息。

    lastlog命令用于显示系统中所有用户最近一次登录信息. lastlog文件在每次有用户登录时被查询.可以使用lastlog命令检查某特定用户上次登录的时间,并格式化输出上次登录日志/var/log ...

  3. 洛谷 P1358 扑克牌

    P1358 扑克牌 题目描述 组合数学是数学的重要组成部分,是一门研究离散对象的科学,它主要研究满足一定条件的组态(也称组合模型)的存在.计数以及构造等方面的问题.组合数学的主要内容有组合计数.组合设 ...

  4. 【技能】Ext.Viewport 实现左三右一排列方式。

    1.Extjs 布局非常是灵活.可是吐槽下CSS,太难重写,想自己重构一套都难哎... var viewport = new Ext.Viewport({ layout:'border', items ...

  5. 思科模拟器之路由器-RIP-DNS解析server

    思科三层交换机之下的局域网搭建,请看这. 接下来将解说怎样通过路由器的RIP协议来连接多个局域网. 并设置DNSserver. 1.路由器RIP配置 RIP协议有个非常致命的缺点:就是它是依据路径长短 ...

  6. Apache-DBUtils包对数据库的操作

    •commons-dbutils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装.学习成本极低.而且使用dbutils能极大简化jdbc编码的工作量,同一时候也不会影 ...

  7. HDU 2102 A计划 (三维的迷宫BFS)

    题目链接:pid=2102">传送门 题意: 三维的一个迷宫,起点在第一层的S(0,0,0)处,问是否能在规定的时间内走到第二层的P 处.'*'代表不能走,'.'代表能够走,'#'代表 ...

  8. 有關AWS EC2 (EBS 收費)的問題

    有關AWS EC2 (EBS 收費)的問題 之前一陣子的時候,公司在使用Amazone Web Service (AWS)的 EC2 (Amazon Elastic Compute Cloud).不過 ...

  9. 中间件 —— 消息中间件（MOM）

    维基百科对消息中间件的定义为:Message-oriented middleware (MOM) is software or hardware infrastructure supporting s ...

  10. 【习题 7-4 UVA-818】Cutting Chains

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 二进制枚举要解开哪些环. 把所有和它相关的边都删掉. 对于剩下的联通分量. 看看是不是每一个联通分量都是一条链 ->每个点的度 ...