css3 背景渐变
本来想先瞎扯些什么,然后又不知道讲什么的好,那就直接进入正题吧。
参考资料:
Using CSS gradients (以及该页面内的大部分链接页面的资料)
首先区分下,平常给的纯色background,指的是background-color属性,而渐变色所指向的是background-image属性,是作为背景图像处理的。
从渐变的形式分为2种:线性渐变(直线扩散)和径向渐变(从圆心扩散)。
线性渐变: linear-gradient | repeating-linear-gradient
径向渐变: radial-gradient | repeating-radial-gradient
线性渐变
语法格式:
linear-gradient( [ <angle/*角度*/> | to <side-or-corner>/*方向*/ ,]? <color-stop/*渐变开始的颜色*/> [, <color-stop>]+/*渐变结束的颜色,开始-结束的区间内包含渐变涉及到的颜色列表*/ )
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <percentage/*当前渐变色所占百分比*/> | <length/*当前渐变色起始位置,也代表上一个颜色渐变结束的位置*/> ]
使用代码及效果图
<div class="test"></div>
两种颜色的渐变
<style>
/*此例由黑色渐变至红色*/
.test{
width:300px;
height: 100px;
background-image: linear-gradient(black, red); /*默认是从上到下的渐变*/
/*background-image: linear-gradient(to top, black, red);*/ /*从下到上的渐变*/
/*background-image: linear-gradient(to right, black, red);*/ /*从左到右的渐变*/
/*background-image: linear-gradient(to left, black, red);*/ /*从右到左的渐变*/
}
</style>
效果图如下:
三种及多种颜色的渐变
<style>
/*此例由黑色渐变至红色再至黄色*/
.test{
width:300px;
height: 100px;
background-image: linear-gradient(black, red, yellow); /*从上到下*/
/*background-image: linear-gradient(to top, black, red, yellow);*/ /*从下到上*/
/*background-image: linear-gradient(to right, black, red, yellow);*/ /*从左到右*/
/*background-image: linear-gradient(to left, black, red, yellow);*/ /*从右到左*/
}
/*... 按此规则依次加颜色列表,实现多色渐变*/
</style>
效果图如下:
渐变距离的控制
<style>
.test{
width:300px;
height: 100px;
background-image: linear-gradient(to right, black 5px, red 60px, yellow 100px, purple 300px);
}
</style>
效果图如下:
给渐变色加了位置值所代表的含义:
1. div[class="test"]背景色执行从左到右的渐变
2. 0px-5px为黑色
3. 5px-60px为黑色向红色的渐变
4. 60px-100px为红色向黄色的渐变
5. 100px-300px为黄色向紫色的渐变
每两种颜色之间的渐变的距离为位置差。
如果后一个颜色的起始位置的值小于前一个颜色的起始位置的值,则这两种颜色的渐变距离为0,变成直接的颜色变化。
最后一个颜色可不设置起始位置的值,默认渐变至总长度(这里指div宽度)的末尾。如果最后一个颜色起始位置的值小于总长度的值,则从该值开始至总长度的末尾由该颜色值纯色填充。
使用百分比:
<style>
.test{
width:300px;
height: 100px;
background-image: linear-gradient(to right, black 10%, red 30%, yellow 50%, purple 100%);
}
</style>
解释同上。
不同角度的渐变
以上案例都是以<side-or-corner>决定渐变方向,使用<angle>便可以根据自己喜好定义方向了。
在webkit内核的deg
正常模式(指的是没规定浏览器内核的样式)deg
angle的角度值与上图的角度值所指方向一致。
<style>
/*这里以标准的为例*/
.test{
width:300px;
height: 100px;
background-image: linear-gradient(0deg, black, red); /*从下至上*/
/*background-image: linear-gradient(45deg, black, red);*/ /*从左下角至右上角*/
/*background-image: linear-gradient(90deg, black, red);*/ /*从左至右*/
/*background-image: linear-gradient(135deg, black, red);*/ /*从左上角至右下角*/
/*background-image: linear-gradient(180deg, black, red);*/ /*从上至下*/
/*background-image: linear-gradient(225deg, black, red);*/ /*从右上角至左下角*/
/*background-image: linear-gradient(270deg, black, red);*/ /*从右至左*/
/*background-image: linear-gradient(315deg, black, red);*/ /*从右下角至左上角*/
}
</style>
径向渐变
语法格式:
radial-gradient( [ circle/*圆*/ || <length>/*半径大小*/ ] [ at <position>/*圆心所在位置*/ ]? ,
| [ ellipse/*椭圆*/ || [<length> | <percentage> ]{}]/*百分比*/ [ at <position>/*圆心所在位置*/ ]? ,
| [ [ circle | ellipse ]/*圆or椭圆*/ || <extent-keyword>/*椭圆离(最近,最远)边或角的距离*/ ] [ at <position>/*圆心所在位置*/ ]? ,
| at <position> ,
<color-stop> [ , <color-stop> ]+/*渐变颜色列表及位置*/ )
<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
<color-stop> = <color> [ <percentage> | <length> ]
使用代码及效果图
<div class="test"></div>
圆
<style>
.test{
width: 300px;
height: 100px;
background-image: radial-gradient(50px at 50% 50% , white 0%, red 50%, purple 99%, transparent 99%);
}
</style>
以上代码的圆心在元素的中心点(50% 50%),半径为50px,圆心白色,圆心至半径50%处由白色渐变至红色,又从半径50%处至99%处红色渐变至紫色,从半径长度的99%至99%由紫色渐变透明。
注意:transparent 99%(或0%-99%)是为圆规定在99%之后至100%的背景色为透明,如果除去这个设置,那剩余部分将会被前一个背景色填充,当然,现在这个值在这里是99%,在其他地方也可以是其他值,根据上一个颜色的相对圆心的距离确定范围。
椭圆
<style>
.test{
width: 300px;
height: 100px;
border: 1px solid black;
background-image: radial-gradient( ellipse farthest-corner at 30% 30% , white 0%, red 20%, purple 30%, transparent 30%);
}
</style>
首先,选择圆的类型是ellipse,然后选择extent-keyword来确定椭圆的规格(farthest-corner),然后at position确定圆心所在位置(30% 30%),之后日常的渐变颜色列表及渐变范围。
效果图如下:
分析下extent-keyword:
closest-side: 以靠近圆心的最近的一条边为基准来规定椭圆的大小。
closest-corner:以靠近圆心的最近的一个角(椭圆所在元素的角)为基准来规定椭圆的大小。
farthest-side:以靠近圆心的最远的一条边为基准来规定椭圆的大小。
farthest-corner:以靠近圆心的最远的一个角(椭圆所在元素的角)为基准来规定椭圆的大小。
以上图为例,规定的是farthest-corner,这时候最远的角是div的点D所在的角(最近的角是点A所在位置的角,最近的边是AB边,最远的边是BD边),且椭圆为30%的规格,圆心是点O,OF:OD = 3:10,所谓的30%便是这么得来的(当然,也可以是像素规定)。
...其余规则以此类推...
渐变的repeat
线性repeat
语法格式:
repeating-linear-gradient( [ <angle>/*角度*/ | to <side-or-corner>/*方向*/ ,]? <color-stop> [, <color-stop>]+/*渐变颜色列表*/ )
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <percentage> | <length> ]
案例:
<style>
.test{
width: 300px;
height: 100px;
border: 1px solid black;
background-image: repeating-linear-gradient(180deg, transparent, transparent 5px, black 5px, black 10px),repeating-linear-gradient(90deg, transparent, transparent 5px, black 5px, black 10px);
}
</style>
效果图如下:
repeating-linear-gradient也可重复使用
<style>
.test{
width: 300px;
height: 100px;
border: 1px solid black;
background-image: repeating-linear-gradient(180deg, transparent, transparent 5px, black 5px, black 6px),repeating-linear-gradient(90deg, transparent, transparent 5px, black 5px, black 6px);
}
</style>
效果图如下:
角度和方向可根据各自需求选择。
当然,有了线性的repeat,径向也不会示弱,来看看径向的repeat的吧。
语法格式:
repeating-radial-gradient( [[ circle/*圆*/ || <length>/*半径*/ ] [at <position>]?/*位置*/ , |
[ ellipse/*椭圆*/ || [<length> | <percentage> ]{}] [at <position>]? , |
[[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , |
at <position> , <color-stop> [ , <color-stop> ]+ )
<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
<color-stop> = <color> [ <percentage> | <length> ]
这个是圆的:
<style>
.test{
width: 300px;
height: 100px;
border: 1px solid black;
background-image: repeating-radial-gradient(circle, black, black 5px, white 5px, white 10px);
}
</style>
效果图如下:
这个是椭圆的:
<style>
.test{
width: 300px;
height: 100px;
border: 1px solid black;
background-image: repeating-radial-gradient(ellipse, black, black 5px, white 5px, white 10px);
}
</style>
效果图如下:
暂时就写这些吧,具体的运用看各自设计图给的是什么样的~ 也是懒得每个效果都切图...
同时,欢迎大家共同交流讨论各种技术问题~
css3 背景渐变的更多相关文章
- CSS3背景渐变。。。
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 G ...
- css3背景渐变以及图片混合渲染模式(一)
一.CSS3 渐变(Gradients):CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(g ...
- CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). 为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器 ...
- 使用css3背景渐变中的透明度来设置不同颜色的背景渐变
为了添加透明度,我们使用 rgba() 函数来定义颜色结点.rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明.rgba()后面的 ...
- css3背景渐变以及图片混合渲染模式(二)
http://avnpc.com/pages/photoshop-layer-blending-algorithm http://www.html5cn.org/forum.php?mod=viewt ...
- css3背景颜色渐变属性
https://www.cnblogs.com/ningkyolei/p/4623697.html 很久之前写的一篇文章了,今天重新整理一下关于css3背景渐变的写法,至于是怎么来的,可以看下面渐变的 ...
- 第七十九,CSS3背景渐变效果
CSS3背景渐变效果 学习要点: 1.线性渐变 2.径向渐变 本章主要探讨HTML5中CSS3背景渐变功能,主要有两种渐变方式:线性渐变和径向 (放射性)渐变. 一.线性渐变 linear-gradi ...
- 关于css3的背景渐变
关于css3的渐变,目前各大浏览器还未做到很好的支持,所以需要在我们使用时加上各大浏览器前缀. -moz-:使用Mozilla内核的浏览器(Firefox浏览器) -webkit-:使用Webkit内 ...
- CSS3魔法堂:背景渐变(Gradient)
一.前言 很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认知这一特性,以下笔记以便日后查阅. 二.CSS3的各种背景渐变 1. 线性渐变 示例——七彩虹 ...
随机推荐
- javascript 类型转换。
学校js感觉好漫长,断断续续,要坚持每天都能学到点,总结了下数据类型的转换. Javascript的变量是松散类型的,它可以存储Javascript支持的任何数据类型,其变量的类型可以在运行时被动态改 ...
- JavaScript执行环境
执行环境(Execution Context,也称为"执行上下文")是JavaScript中最为重要的一个概念.执行环境定义了变量或函数有权访问的其它数据,决定了各自的行为.当Ja ...
- Dynamics CRM 2015-Sign Out选项
If you are using CRM Online - there is a sign out button in the upper right corner (in the web versi ...
- Android 弱引用和软引用
软引用 和 弱引用 1. SoftReference<T>:软引用-->当虚拟机内存不足时,将会回收它指向的对象:需要获取对象时,可以调用get方法. 2. WeakRefere ...
- mysql操作入门基础之对数据库和表的增删改查
一.数据库管理-- 1.登陆数据库 mysql -u root -p; -- 2.查看数据库服务器所有数据库 SHOW DATABASES; -- 3.创建数据库 CREATE DATABASE My ...
- 开启基本数据结构和算法之路--初识Graphviz
在我的Linux刀耕开荒阶段,就想开始重拾C,利用C实现常用的基本数据结构和算法,而数据结构和算法的掌握的熟练程度正是程序的初学者与职业程序员的分水岭. 那么怎么开启这一段历程呢? 按照软件工程的思想 ...
- 初识hive
由facebook 开源用以帮用户解决海量数据etl,构建于hadoop的 数据仓库. 使用hql作为查询接口 使用hdfs作为底层存储 使用mr作为执行层 1.为什么使用hive? 1 ...
- SQL中几个常用的排序函数
最近使用窗口函数的频率越来越高,这里打算简单介绍一下几个排序的函数,做一个引子希望以后这方面的问题能够更深入的理解,这里先简单介绍一下几个简单的排序函数及其相关子句,这里先从什么是排序开始吧 ...
- Oracle学习笔记十二 子程序(存储过程、自定函数)和程序包
子程序 子程序:命名的 PL/SQL 块,编译并存储在数据库中. 子程序的各个部分: 1.声明部分 2.可执行部分 3.异常处理部分(可选) 子程序的分类: 1.过程 - 执行某些操作 2.函数 ...
- sublime text 3 快捷键大全以及配置编译环境
Sublime text 3是码农最喜欢的代码编辑器,每天和代码打交道,必先利其器,掌握基本的代码编辑器的快捷键,能让你打码更有效率.刚开始可能有些生疏,只要花一两个星期坚持使用并熟悉这些常用的快捷键 ...