CSS3背景渐变效果

学习要点:
1.线性渐变
2.径向渐变

本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向 (放射性)渐变。

一.线性渐变

linear-gradient背景颜色的渐变功能
CSS3提供了linear-gradient属性实现背景颜色的渐变功能。在以前,这种效果必须采用图片才能实现的。首先,我们先看一下它的样式表,如下:             

linear-gradient(方位,起始色,末尾色)

                      方位          可选参数,渐变的方位。可以使用的值有:

                            totop、to topright、to right、to bottom、to bottomleft、toleft、to top left。

 

                  起始色         必选参数,颜色值

 

                  末尾色         必选参数,颜色值

两个必须参数

p{
width: 200px;
height: 100px;
background-image: linear-gradient(#ffbe18, #138010);
} <p>是一部由北青传媒股份</p>

增加一个方位

p{
width: 200px;
height: 100px;
background-image: linear-gradient( to top,#ffbe18, #138010);
} <p>是一部由北青传媒股份</p>

通过top、left、right、bottom这四组实现的渐变方向有时比较单一,我们可以使用以角度单位的数值来设置方位。比如 度(0deg)相当于totop;角度会沿逆时针方向随着你的角度的增加而增加。

通过角度设置方位, ~ 36 度之间,可以是负值

p{
width: 200px;
height: 100px;
background-image: linear-gradient(45deg, #ffa500, #008000);
} <p>是一部由北青传媒股份</p>

多色线性渐变

p{
width: 200px;
height: 100px;
background-image: linear-gradient(-45deg, #ffa500, #008000, #0000ff, #ff0000);
} <p>是一部由北青传媒股份</p>

通过百分比设置多色线性位置

p{
width: 200px;
height: 100px;
background-image:linear-gradient(-45deg, #ffa500 0%, #008000 20%, #0000ff 40%, #ff0000 1%);
} <p>是一部由北青传媒股份</p>

默认情况下:起始颜色的百分比位置是0%,末尾颜色的百分比位置是1 %,其他位置按照平均值分配。也可以使用px像素来设定,但计算麻烦点。 

结合背景,并使用透明渐变实现强大层次感

p{
width: 200px;
height: 100px;
background-color: red;
background-image: linear-gradient(to top right, rgba(0,0,0,0.6),rgba(0,0,0,0));
} <p>是一部由北青传媒股份</p>

重复渐变属性值

p{
width: 200px;
height: 100px;
background-image:repeating-linear-gradient(to top,orange 10px, green 30px);
} <p>是一部由北青传媒股份</p>

 目前最新的主流浏览器都支持CSS3的渐变属性,那么对于之前的浏览器支持度如何呢?可以参考如下的表:

                                Opera        Firefox      Chrome         Safari          IE

     部分支持需带前缀        11.5                  无             4 ~ 9            4 ~ 5            无

       支持需带前缀                   无             3.6 ~ 15        1 ~ 25       5.1~ 6             无

       支持不带前缀                   12.1+               16+                  26+                    6.1+                 10.0+

这里提到了部分支持,说明当时可能渐变还尚未完善,但可以通过添加前缀来使用它了。具体哪些没完善,已经无法考证了,版本太过久远。那么支持带前缀和不支持带前缀的完整 格式如下:

加上兼容前缀

p{
background-image: -webkit-linear-gradient(to top, orange, green);
background-image: -moz-linear-gradient(to top, orange, green);
background-image: -o-linear-gradient(to top, orange, green);
background-image: linear-gradient(to top, orange, green);
} <p>是一部由北青传媒股份</p>

repeating-linear-gradient属性值和linear-gradient基本相同,不在赘述。 

二.径向渐变

radial-gradient背景径向渐变
CSS3提供了径向渐变,也叫做放射性渐变:radial-gradient属性值。它是从一个点向四周发散的方式扩展。属性值样式表如下:

radial-gradient(方位,起始色,末尾色)

             方位                  可选参数,径向的方位。可以使用的值有:像素、百分比、固定值,或复合搭配使用                    

           起始色                 必选参数,颜色值

           末尾色                 必选参数,颜色值

两个必选参数

p{
background-image: radial-gradient(orange, green);
} <p>是一部由北青传媒股份</p>

如果想设置第一个可选参数,有一种做法是设置为:cirlce(圆形)或ellipse(椭圆形)。默认是椭圆形。

           形状                   说明

           circle             圆形

          ellipse            椭圆形,默认值

p{
background-image: radial-gradient(circle, orange, green);
} <p>是一部由北青传媒股份</p>

不单单可以设置形状,还可以设置形状的发散方向 

            方向                       说明

            top                  从顶部发散

            left                    从左侧发散

           right              从右侧发散

           bottom              从底部发散

           center             从中间发散

p{
background-image: radial-gradient(circle at top, orange, green);
} <p>是一部由北青传媒股份</p>

也可以复合方向,比如右下方

p{
background-image: radial-gradient(circle at right bottom, orange, green);
} <p>是一部由北青传媒股份</p>

可以设置发散的距离,即圆的半径长度 

         半径关键字                     说明

       closest-side          指定径向渐变的半径长度为从圆心到离圆心最近的边

      closest-corner       指定径向渐变的半径长度为从圆心到离圆心最近的角

       farthest-side        指定径向渐变的半径长度为从圆心到离圆心最远的边

      farthest-corner     指定径向渐变的半径长度为从圆心到离圆心最远的角

p{
background-image:radial-gradient(circle closest-side,orange,green);
} <p>是一部由北青传媒股份</p>

关键字有点拗口,可以用像素表示半径,但不接受百分比

p{
background-image: radial-gradient(circle 50px, orange, green);
} <p>是一部由北青传媒股份</p>

同样,也有重复背景方式

p{
background-image: repeating-radial-gradient(circle 50px, orange, green);
} <p>是一部由北青传媒股份</p>

兼容模式 

p{
background-image: -webkit-radial-gradient(circle,orange, green);
background-image: -moz-radial-gradient(circle,orange, green);
background-image: -o-radial-gradient(circle,orange, green);
background-image: radial-gradient(circle, orange, green);
} <p>是一部由北青传媒股份</p>

两个重复背景只要加上前缀就是兼容模式了 

background-image: -webkit-repeating-radial-gradient
background-image: -moz-repeating-radial-gradient
background-image: -o-repeating-radial-gradient
background-image: repeating-radial-gradient

第七十九,CSS3背景渐变效果的更多相关文章

  1. 第三百七十九节,Django+Xadmin打造上线标准的在线教育平台—xadmin的安装

    第三百七十九节,Django+Xadmin打造上线标准的在线教育平台—xadmin的安装 xadmin介绍 xadmin是基于Django的admin开发的更完善的后台管理系统,页面基于Bootstr ...

  2. “全栈2019”Java第七十九章:类中可以嵌套接口吗?

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  3. (七十九)c#Winform自定义控件-导航菜单

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kwwwvagaa/NetWinformControl 码云:ht ...

  4. 第一百七十九节,jQuery-UI,知问前端--按钮 UI-图标

    jQuery-UI,知问前端--按钮 UI 学习要点: 1.使用 button 按钮 2.修改 button 样式 3.button()方法的属性 4.button('action', param) ...

  5. salesforce零基础学习(七十九)简单排序浅谈 篇一

    我们在程序中经常需要对数据列表进行排序,有时候使用SOQL的order by 不一定能完全符合需求,需要对数据进行排序,排序可以有多种方式,不同的方式针对不同的场景.篇一只是简单的描述一下选择排序,插 ...

  6. (七十九)MapKit的基本使用

    MapKit是苹果公司开发的用于显示地图和实现定位.导航的地图框架. MapKit View可以通过storyboard.xib创建,也可以通过代码直接创建. 需要注意的是,通过storyboard和 ...

  7. Java开发笔记(七十九)利用反射技术操作私有属性

    早在介绍多态的时候,曾经提到公鸡实例的性别属性可能被篡改为雌性,不过面向对象的三大特性包含了封装.继承和多态,只要把性别属性设置为private私有级别,也不提供setSex这样的性别修改方法,那么性 ...

  8. 第七十九课 最短路径(Floyd)

    程序如下: #ifndef GRAPH_H #define GRAPH_H #include "Object.h" #include "SharedPointer.h&q ...

  9. C#编程(七十九)---------- 反射

    反射 在介绍翻着之前,先说两个小案例 B超:什么叫B超呢?就是透过肚皮能看到你内脏的情况,不用打开肚子才能看.这是什么样的一种技术呢?B超是B型超声波,它可以透过肚皮通过向你体内发射B型超声波,当超声 ...

随机推荐

  1. git多人合作模式的应用

    接触git只有不到一年的时间,可以说比大多数人起步都晚.那会还沉浸在自己的舒适圈里面,进公司就用着perforce,一用就快7年,觉得自己会用一个SCM就行了,捧着不放,也不想去接触别的SCM. 直到 ...

  2. 二、spark入门之spark shell:文本中发现5个最常用的word

    scala> val textFile = sc.textFile("/Users/admin/spark-1.5.1-bin-hadoop2.4/README.md") s ...

  3. CentOS部署yum本地源和共享

    约定yum本地源的机器IP为192.168.1.100,需要访问共享源的IP为192.168.1.101 关闭并禁止selinux和firewalld 创建本地源 1.上传centos7光盘镜像到指定 ...

  4. Qt编译

    版本及安装环境 项目 版本 位 Windows 7 x64 Visual Studio 2010 x64 qt 4.8.6 x64 下载源码 进入下载列表,下载qt-everywhere-openso ...

  5. 实时控制软件第一周 汽车ABS系统软件分析

    abs系统简介 在踩急刹车的时候,若没有额外的控制,容易使车轮完全停止转动,从而出现车轮打滑,车轮导向作用丧失的危险情况. abs系统的作用是在驾驶员完全踩住制动踏板的情况下,通过实时地测量车轮转速, ...

  6. JS 获取网页的宽高

    网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWi ...

  7. Firefox一次提交两次请求的问题

    把这迅雷的插件禁用后一切恢复正常.

  8. tomcat配置https方法

    利用tomcat服务器配置https双向认证 步骤 1.为服务器生成证书进入控制台,切换到%JAVA_HOME%/bin目录,具体操作略. 使用keytool为Tomcat生成证书,假定目标机器的域名 ...

  9. CodeForces 669D Little Artem and Dance

    模拟. 每个奇数走的步长都是一样的,每个偶数走的步长也是一样的. 记$num1$表示奇数走的步数,$num2$表示偶数走的步数.每次操作更新一下$num1$,$num2$.最后输出. #pragma ...

  10. vertical-align属性详解

    vertical-align属性详解:http://www.cnblogs.com/wcp-spring/archive/2013/03/04/2942456.html 关于vertical-alig ...