第七十九,CSS3背景渐变效果
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背景渐变效果的更多相关文章
- 第三百七十九节,Django+Xadmin打造上线标准的在线教育平台—xadmin的安装
第三百七十九节,Django+Xadmin打造上线标准的在线教育平台—xadmin的安装 xadmin介绍 xadmin是基于Django的admin开发的更完善的后台管理系统,页面基于Bootstr ...
- “全栈2019”Java第七十九章:类中可以嵌套接口吗?
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- (七十九)c#Winform自定义控件-导航菜单
前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kwwwvagaa/NetWinformControl 码云:ht ...
- 第一百七十九节,jQuery-UI,知问前端--按钮 UI-图标
jQuery-UI,知问前端--按钮 UI 学习要点: 1.使用 button 按钮 2.修改 button 样式 3.button()方法的属性 4.button('action', param) ...
- salesforce零基础学习(七十九)简单排序浅谈 篇一
我们在程序中经常需要对数据列表进行排序,有时候使用SOQL的order by 不一定能完全符合需求,需要对数据进行排序,排序可以有多种方式,不同的方式针对不同的场景.篇一只是简单的描述一下选择排序,插 ...
- (七十九)MapKit的基本使用
MapKit是苹果公司开发的用于显示地图和实现定位.导航的地图框架. MapKit View可以通过storyboard.xib创建,也可以通过代码直接创建. 需要注意的是,通过storyboard和 ...
- Java开发笔记(七十九)利用反射技术操作私有属性
早在介绍多态的时候,曾经提到公鸡实例的性别属性可能被篡改为雌性,不过面向对象的三大特性包含了封装.继承和多态,只要把性别属性设置为private私有级别,也不提供setSex这样的性别修改方法,那么性 ...
- 第七十九课 最短路径(Floyd)
程序如下: #ifndef GRAPH_H #define GRAPH_H #include "Object.h" #include "SharedPointer.h&q ...
- C#编程(七十九)---------- 反射
反射 在介绍翻着之前,先说两个小案例 B超:什么叫B超呢?就是透过肚皮能看到你内脏的情况,不用打开肚子才能看.这是什么样的一种技术呢?B超是B型超声波,它可以透过肚皮通过向你体内发射B型超声波,当超声 ...
随机推荐
- git多人合作模式的应用
接触git只有不到一年的时间,可以说比大多数人起步都晚.那会还沉浸在自己的舒适圈里面,进公司就用着perforce,一用就快7年,觉得自己会用一个SCM就行了,捧着不放,也不想去接触别的SCM. 直到 ...
- 二、spark入门之spark shell:文本中发现5个最常用的word
scala> val textFile = sc.textFile("/Users/admin/spark-1.5.1-bin-hadoop2.4/README.md") s ...
- CentOS部署yum本地源和共享
约定yum本地源的机器IP为192.168.1.100,需要访问共享源的IP为192.168.1.101 关闭并禁止selinux和firewalld 创建本地源 1.上传centos7光盘镜像到指定 ...
- Qt编译
版本及安装环境 项目 版本 位 Windows 7 x64 Visual Studio 2010 x64 qt 4.8.6 x64 下载源码 进入下载列表,下载qt-everywhere-openso ...
- 实时控制软件第一周 汽车ABS系统软件分析
abs系统简介 在踩急刹车的时候,若没有额外的控制,容易使车轮完全停止转动,从而出现车轮打滑,车轮导向作用丧失的危险情况. abs系统的作用是在驾驶员完全踩住制动踏板的情况下,通过实时地测量车轮转速, ...
- JS 获取网页的宽高
网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWi ...
- Firefox一次提交两次请求的问题
把这迅雷的插件禁用后一切恢复正常.
- tomcat配置https方法
利用tomcat服务器配置https双向认证 步骤 1.为服务器生成证书进入控制台,切换到%JAVA_HOME%/bin目录,具体操作略. 使用keytool为Tomcat生成证书,假定目标机器的域名 ...
- CodeForces 669D Little Artem and Dance
模拟. 每个奇数走的步长都是一样的,每个偶数走的步长也是一样的. 记$num1$表示奇数走的步数,$num2$表示偶数走的步数.每次操作更新一下$num1$,$num2$.最后输出. #pragma ...
- vertical-align属性详解
vertical-align属性详解:http://www.cnblogs.com/wcp-spring/archive/2013/03/04/2942456.html 关于vertical-alig ...