移动端背景渐变，非常的年轻，符合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. chattr---文件隐藏属性

  2. c++操作当前窗体句柄

    句柄 这一概念是MFC里的一个类.MFC有专门的函数来获取窗体句柄. HWND hwnd; hwnd=CreateWindow("my own windowshandle",&qu ...

  3. Aruba 云服务代金券

    Aruba 云服务代金券 Aruba Cloud是欧洲的一家VPS供应商,他家的VPS是基于VMware的,有英国.法国.德国.意大利.捷克5处数据中心,每个月最低1欧元,非欧洲企业客户可以免税 这里 ...

  4. JavaScript中的global对象，window对象以及document对象的区别和联系

    JavaScript中的global对象,window对象以及document对象的区别和联系 一.概念区分:JavaScript中的global对象,window对象以及document对象 1.g ...

  5. Objective-C基础笔记（7)Foundation中的常用结构体

    一.NSRange NSRange的定义: typedef struct _NSRange { NSUInteger location; NSUInteger length; } NSRange; N ...

  6. BZOJ1444: [Jsoi2009]有趣的游戏（Trie图，矩乘）

    Description Input 注意 是0<=P, n , l, m≤ 10. Output Sample Input input 1 3 2 2 1 2 1 2 AB BA AA inpu ...

  7. 将二级目录下的文件合并成一个文件的Python小脚本

    这个小程序的目的是将二级目录下的文件全部合并成一个文件(其实几级目录都可以,只要做少许改动) #coding:utf8 import sys, os def process(path): new_fi ...

  8. kibana中信息分类查询显示的方法

    1.什么是kibana? kibana是ELK(elasticsearch+logstash+kibana)中的K,它是一个可灵活的分析和可视化平台,主要是显示数据以及根据这些数据绘出一些可视化图表, ...

  9. Windows Server 2016 上配置 APACHE+SSL+PHP+perl

    Windows Server 2016 上配置 APACHE+SSL+PHP+perl 安装环境 谷歌云实例 Windows Server 2016 Apache Apache/2.4.25 (win ...

  10. 1.1 Introduction中 Guarantees官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Guarantees Kafka的保证(Guarantees) At a high- ...