移动端背景渐变，非常的年轻，符合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. Vue移动端flexible.js+MuseUi

    因为公司有个项目需求,手机端的.之前就写了一个一样的项目,只不过是用原生的写的,心想刚写了个vue后台管理系统,何不也用vue写,所有就没有把之前的利用过来.那么问题来了,要让手机端自适应我们该怎么做 ...

  2. iOS应用笔记之git的本地使用

    什么是git (1)什么是git >git是一个 "分布式"的版本号控制工具 >git的作者是Linux之父:Linus Benedict Torvalds,当初开发g ...

  3. Filebeat之input和output（包含Elasticsearch Output 、Logstash Output、 Redis Output、 File Output和 Console Output）

    前提博客 https://i.cnblogs.com/posts?categoryid=972313 Filebeat啊,根据input来监控数据,根据output来使用数据!!! Filebeat的 ...

  4. 关于bcg库记忆界面的问题及其解决办法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 今天同事向我请教一个问题,说他使用BCG创建了一个停靠栏,之后把代码注释了,但是程序启动时总出现一个Debug Ass ...

  5. javafx spring

    javafx spring http://files.cnblogs.com/files/rojas/airhacks_control.zip

  6. CISP/CISA 每日一题 17

     CISSP 每日一题(答) What are often added to passwords to maketheir resultant hash secure and resistant to ...

  7. C# 反射基础运用

    反射是.NET中的重要机制,通过反射,可以在运行时获得程序或程序集中每一个类型 (包括类.结构.委托.接口和枚举等)的成员和成员的信息. 其实有些人会问, 像我们平常引用DLL可以直接用, 为什么要用 ...

  8. Android中使用HttpClient实现HTTP通信效果

    HTTP通信,这一案例在操作的时候遇到N多种种问题,是前面看过几个实例里面最麻烦的一个.由于没有系统的接触过JAVA,所以出了非常多错误,也无从下手解决,这里经过对错误的检索实现了HTTP通信,以做记 ...

  9. 对象的序列化与反序列化---IO学习笔记（四）

    对象的序列化,反序列化 对象的序列化: 就是将Object转换成byte序列 对象的反序列化: 将byte序列转换成Object 序列化流.反序列化流 序列化流(ObjectOutputStream) ...

  10. rocketmq事务消息入门介绍

    说明 周五的时候发了篇:Rocketmq4.3支持事务啦!!!,趁着周末的时候把相关内容看了下,下面的主要内容就是关于RocketMQ事务相关内容介绍了. 说明: 今天这篇仅仅是入门介绍,并没有涉及到 ...