移动端背景渐变，非常的年轻，符合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. JS面向对象：

    面向对象:--JS系统对象也是基于原型的程序--不要修改或者添加系统对象下面的方法和属性eg: var arr = [1,2,3]; Array.prototype.push = function() ...

  2. 【2017 Multi-University Training Contest - Team 5】Rikka with Competition

    [Link]: [Description] [Solution] 把所有人的能力从大到小排; 能力最大的肯定可能拿冠军; 然后一个一个地往后扫描; 一旦出现a[i-1]-a[i]>k; 则说明从 ...

  3. 用了Redis里面的map和set

    map的操作用 hset,hget等 set的操作有 sadd sismember等 参考下面: http://blog.csdn.net/kwsy2008/article/details/48467 ...

  4. 对AWS的计费有点糊涂

    对AWS的计费有点糊涂 今天收到亚马逊的账单,就两笔 1. US West (Oregon) Region     Elastic IP Addresses $0.005 per Elastic IP ...

  5. GestureDetector- 滑屏手势方式实现

    今天做的项目中,需要使用滑屏来调出一个界面,经过自己的尝试,结合网上的方法,成功实现了. 代码如下 package com.example.text; import android.app.Activ ...

  6. JavaScript--Module模式

    //module: Module模式是JavaScript编程中一个非常通用的模式 window.onload = function() { //1.基本使用: var MyFn = function ...

  7. echarts tooltip提示框 自定义小圆点(颜色、形状和大小等等)

    项目是拿 echarts + 百度地图 来做可视化界面,现在到收尾阶段慢慢优化. 先附代码: formatter: function(params) { var result = '' params. ...

  8. CentOS 7最小化安装图解

    一.环境介绍: win10 x64安装VMware® Workstation 14 Pro(版本:14.1.2 build-8497320) 二.安装CentOS 1.新建虚拟机 打开虚拟机,主页,创 ...

  9. uva 1456(dp)

    题意:有n个数字u1,u2,u3-un,每一个数字出现的概率pi = ui/(u1 + u2 + - + un),分成w组.计算期望值. 第一组例子的五个数字例如以下 30 5 10 30 25 分成 ...

  10. ToggleButton控件

    ToggleButton 两种状态 ·状态button     -继承自CompoundButton ·主要属性:-Android:textOn    -Android:textOff ·主要方法: ...