CSS 3 学习——渐变
通过CSS渐变创建的是一个没有固定比例和固定尺寸的<image>类型，也就是说是一张图片，这张图片的尺寸由所应用的元素的相关信息决定。凡是支持图片类型的CSS属性都可以设置渐变，而支持颜色值的CSS属性就不能设置渐变。比如，background-image可以设置渐变，background-color不能设置渐变。
所有现代浏览器都支持渐变的W3C标准语法，包括IE10。
渐变类型有两种：线性渐变和径向渐变。
线性渐变
线性渐变可以通过两个函数指定：linear-gradient() 和 repeating-linear-gradient()。
线性渐变的大概原理图（图中“已设置背景渐变为例”中的“已”应为“以”）：
我们视觉上看到渐变效果上的那些色带实际上是与渐变轴垂直的。如果我们在渐变区域内任意做一条渐变轴的垂线，那么垂线上的点的颜色是完全相同的。
linear-gradient()
W3C标准语法：
<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
<angle> 是角度，单位deg
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?
取值：
下述值用来表示渐变的方向，可以使用角度或者关键字来设置：
- <angle>：
- 用角度值指定渐变的方向（或角度）。
- to left：
- 设置渐变为从右到左。相当于: 270deg
- to right：
- 设置渐变从左到右。相当于: 90deg
- to top：
- 设置渐变从下到上。相当于: 0deg
- to bottom：
- 设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
<color-stop> 用于指定渐变的起止颜色：
- <color>：指定颜色。
- <length>：用长度值指定起止色位置。不允许负值
- <percentage>：用百分比指定起止色位置。
- 下面看一个示例
- 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 渐变</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
background-color: #008888;
}
#wikipedia{
position: relative;
margin:auto;
margin-top:200px;
width: 170px;
height: 170px;
/*background-image: repeating-linear-gradient(to bottom,black,#fff,red);*/
background-image: linear-gradient(to bottom,black,red,#fff);
background-repeat: no-repeat;
} </style>
</head>
<body>
<section class="flex-continer" id="wikipedia"> </section>
</body>
</html>
效果
对于不指定具体位置的渐变，颜色的分界点在哪儿，举例说明。
background-image: linear-gradient(to bottom,black,red,gray,blue,green);
- 示意图
- 设置了5种颜色，这5种颜色从渐变轴上的开始点开始到渐变轴上的结束点为止，把这之间的距离均分成了4段；如果设置4种颜色，就均分成3段，依次类推。
- 下面看看指定了具体位置的渐变的情况。
- 在linear-gradient()函数中，从左到右相邻颜色名后指定的位置的差值，就是从前一个颜色渐变到后一个颜色的渐变带的宽度。如果差值不大于零，则没有渐变效果。而且第一个颜色名后指定的位置，实际上是从渐变开始点算起，第一个颜色的纯色带在渐变轴方向上的宽度，这个位置以后才有可能有渐变效果。最后一个颜色名后的位置与第一个颜色名后的位置的差值，是从第一个颜色渐变到最后一个颜色的总的渐变带的宽度，最后一个位置往后都是纯色。（这里说的位置是渐变轴上从渐变开始点算起的位置）
- 例 1、
- 代码：
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
background-color: #008888;
}
#wikipedia{
position: relative;
margin:auto;
margin-top:200px;
width: 170px;
height: 170px;
/*background-image: repeating-linear-gradient(to bottom,black,#fff,red);*/
background-image: linear-gradient(to bottom,black 40px,red 20px,#fff 40px);
/*background-image: linear-gradient(to bottom,black,red,gray,blue,green);*/
background-repeat: no-repeat;
}
#a{
position:absolute;
width:20px;
height:40px;
top:0px;
left:0;
background-color: green;
}
</style>
<body>
<section class="flex-continer" id="wikipedia">
<div id="a"></div>
</section>
</body>
效果：
图中绿色矩形高度为40px，用于对比测试。
例 2、
为了验证上面的解释，使用了3、4、5和60deg的特殊直角三角关系。
代码：
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
background-color: #008888;
}
#wikipedia{
position: relative;
margin:auto;
margin-top:200px;
width: 360px;
height: 270px;
/*background-image: repeating-linear-gradient(to bottom,black,#fff,red);*/
background-image: linear-gradient(60deg,black 50px,red 60px,#fff 100px);
/*background-image: linear-gradient(to bottom,black,red,gray,blue,green);*/
background-repeat: no-repeat;
}
#a{
position:absolute;
width:40px;
height:30px;
bottom:0px;
left:0;
background-color: green;
}
</style>
</head>
<body>
<section class="flex-continer" id="wikipedia">
<div id="a"></div>
</section>
</body>
效果：
图中绿色方块宽40px，高30px，对角线50px。整个背景区域宽360px，高270px。
repeating-linear-gradient()
repeating-linear-gradient()设置重复的线性渐变。他的语法与linear-gradient()的一样。
语法：
<repeating-linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?
取值：
下述值用来表示渐变的方向，可以使用角度或者关键字来设置：
<angle>：用角度值指定渐变的方向（或角度）。to left：设置渐变为从右到左，相当于: 270deg；to right：设置渐变从左到右，相当于: 90deg；to top：设置渐变从下到上，相当于: 0deg；to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
<color-stop> 用于指定渐变的起止颜色：
<color>：
指定颜色。
<length>：
用长度值指定起止色位置。不允许负值
<percentage>：
用百分比指定起止色位置。
在颜色名后不指定具体位置时，他的效果与linear-gradient()的效果一样。看例子。
以本篇的第一个例子为例，只修改第22行代码：
background-image: linear-gradient(to bottom,black,red,#fff);
为：
background-image: repeating-linear-gradient(to bottom,black,red,#fff);
最后效果完全一样：
如果颜色名后指定了具体位置，两者的差别就很明显了。
一般情况下，第一个颜色名后的位置，实际上是第一个重复单元在渐变轴上开始的位置；最后一个颜色名后的位置，实际上是第一个重复单元在渐变轴上结束的位置，中间的颜色名在重复单元中按顺序依次排列。
在实际应用中，情况比较复杂，不光是只看第一个颜色名和最后一个颜色名后的位置，而是对比除第一个颜色名外所有颜色名后的位置的数值，数值最大的，就是重复单元中的最后一个颜色。（对于不一般的情况，情形太多，没有一一去试）
例1、
代码：
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
background-color: #008888;
}
#wikipedia{
position: relative;
margin:auto;
margin-top:200px;
width: 360px;
height: 270px;
background-image: repeating-linear-gradient(to bottom,black 80px,red 90px,#fff 110px);
/*background-image: linear-gradient(60deg,black 50px,red 60px,#fff 100px);*/
/*background-image: linear-gradient(to bottom,black,red,gray,blue,green);*/
background-repeat: no-repeat;
}
#a{
position:absolute;
width:30px;
height:30px;
top:20px;
left:0;
background-color: green;
}
</style>
</head>
<body>
<section class="flex-continer" id="wikipedia">
<div id="a"></div>
</section>
</body>
效果：
background-image: repeating-linear-gradient(to bottom,black 80px,red 90px,#fff 110px);
上面代码中，黑色在渐变轴方向上距渐变的开始点80px处开始，即黄线与渐变轴的交点。从这一点开始，颜色从黑色先渐变到红色再渐变到白色，至110px处结束，形成第一个重复单元，然后往下依次用重复单元填充背景区域的余下空间。填充到底部时，再循环到顶部开始，直到填充完整个背景区域。（图中的绿色小方块宽和高均为20px，绝对定位，top属性为20px）
这里第一个颜色名后的数值不像linear-gradient()中第一个名后的数值会形成指定宽度的纯色带。
要用repeating-linear-gradient()形成纯色带，可以像下面这样写代码：
background-image: repeating-linear-gradient(to bottom,black 80px,black 110px,#fff 110px,#fff 140px);
效果：
径向渐变
径向渐变可以通过两个函数指定：radial-gradient() 和 repeating-radial-gradient()。
径向渐变以指定的点为中心点，向四周以同心圆或同心椭圆的形状按指定的颜色渐变。
下面还以背景区域为例讲解。
radial-gradient()
radial-gradient() 的语法（按正则表达式的规则理解）：
radial-gradient() = radial-gradient(
[ [ circle || <length> ] [ at <position> ]? , |
[ ellipse || <length-percentage>{2} ] [ at <position> ]? , |
[ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? , |
at <position> ,
]?
<color-stop> [ , <color-stop> ]+
)
<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
指定渐变形状
1、形状关键字
circle 表示圆形
ellipse 表示椭圆形
可以直接以关键字circle或ellipse指定渐变形状，也可以通过数值指定渐变的形状。圆形就指定一个数值，表示半径；椭圆就指定两个不相等的数值，第一个是水平轴，第二个是垂直轴，如果水平轴等于垂直轴，其实就是一个正圆。（默认形状要看背景区域的尺寸，背景区域是正方形，就是原型，否则就是椭圆）
形状关键字为circle时，表示半径的数值不能使用百分数，且不能指定超过一个值；形状关键字为ellipse时，可以使用百分数数值，且必须指定两个值（分别代表水平轴和垂直轴）或不指定值，不能只指定一个值。
2、半径或轴长关键字<extent-keyword>
<extent-keyword>的取值：
closest-side |
渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。 |
closest-corner |
渐变的边缘形状与容器距离渐变中心点最近的一个角相交。 |
farthest-side |
与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。 |
farthest-corner |
渐变的边缘形状与容器距离渐变中心点最远的一个角相交。 |
以上设置的半径或轴长，实际上指的是从渐变中心点开始，从第一个颜色渐变到最后一个颜色时，渐变带在水平径向上和垂直径向上的宽度，每种颜色的分布（没有指定结束位置），与前面线性渐变颜色在渐变轴上的分布一样。
例子：
代码：
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
background-color: #008888;
}
#wikipedia{
position: relative;
margin:auto;
margin-top:200px;
width: 400px;
height: 400px;
background-image: radial-gradient(circle 100px,black,#fff,red);
/*background-image: linear-gradient(60deg,black 50px,red 60px,#fff 100px);*/
background-repeat: no-repeat;
}
#a{
position:absolute;
width:100px;
height:100px;
top:150px;
left:150px;
background-color: rgba(31,131,33,0.2);
}
</style>
</head>
<body>
<section class="flex-continer" id="wikipedia">
<div id="a"></div>
</section>
</body>
效果：
图中泛绿的透明小方块宽和高均为100px，在背景区域的正中心，作参照。整个背景区域宽和高均为400px。整个渐变区域从正中心开始，由黑色先渐变到白色（从黑到白，渐变带50px），再从白色渐变到红色（也是50px），最终整个渐变带从正中心到结束宽100px，就是CSS代码中设置的100px。
指定渐变中心点位置<position>
指定玩形状之后，还可以指定渐变的中心点位置。<position> 与 background-position 或者 transform-origin 类似。指定具体数值时，可以指定为负值。如果不指定，以背景区域为例，则在背景区域的正中心。（规范中有一个gradient box 术语）
指定颜色的位置<color-stop>
<color-stop>表示某个确定位置的固定色值，包含一个<color>值加上可选的位置值（相对虚拟渐变射线的<percentage>或者<length>长度值）。 百分比值0%，或者长度值0，表示渐变中心点；百分比值100%表示渐变射线（以渐变中心点为端点）与gardient box边缘相交的点。 其间的百分比值线性对应渐变射线上的点。
这里百分数的计算，我猜测：以渐变中心点为端点，向gardient box的四个顶点做线段，以得到的四条线段中最长的那一条为准计算百分数的值。
例子1、
代码：
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
background-color: #008888;
}
#wikipedia{
position: relative;
margin:auto;
margin-top:200px;
width: 400px;
height: 200px;
background-image: radial-gradient(circle at 0px 0px,black 50%,#fff,red);
/*background-image: linear-gradient(60deg,black 50px,red 60px,#fff 100px);*/
background-repeat: no-repeat;
}
#a{
position:absolute;
width:200px;
height:100px;
top:0px;
left:0px;
background-color: rgba(31,131,33,0.3);
}
</style>
</head>
<body>
<section class="flex-continer" id="wikipedia">
<div id="a"></div>
</section>
</body>
效果：
图中径向渐变的中心点为0px 0px，即背景区域的左上角顶点。背景区域宽为400px，高为200px，绿色方框宽为200px，高为100px，黑色的结束位置设置为100%，从图上看，就是背景区域对角线的重点位置。
再看一个例子2、
代码：
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
background-color: #008888;
}
#wikipedia{
position: relative;
margin:auto;
margin-top:200px;
width: 500px;
height: 400px;
background-image: radial-gradient(circle at 100px 200px,black 50%,#fff,red);
/*background-image: linear-gradient(60deg,black 50px,red 60px,#fff 100px);*/
background-repeat: no-repeat;
}
#a{
position:absolute;
width:200px;
height:100px;
top:200px;
left:100px;
background-color: rgba(31,131,33,0.3);
}
</style>
</head>
<body>
<section class="flex-continer" id="wikipedia">
<div id="a"></div>
</section>
</body>
效果：
还有一个例子3、
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
background-color: #008888;
}
#wikipedia{
position: relative;
margin:auto;
margin-top:200px;
width: 500px;
height: 500px;
background-image: radial-gradient(circle at 100px 300px,black 50%,#fff,red);
/*background-image: linear-gradient(60deg,black 50px,red 60px,#fff 100px);*/
background-repeat: no-repeat;
}
#a{
position:absolute;
width:200px;
height:150px;
bottom:200px;
left:100px;
background-color: rgba(31,131,33,0.3);
}
</style>
</head>
<body>
<section class="flex-continer" id="wikipedia">
<div id="a"></div>
</section>
</body>
效果：
通过上面的例子可以看到，第一个颜色名后跟位置值形成了一个以该值为半径的纯色块，与线性渐变的原理是相通的（不再解释了，语言组织能力不行）。
直接看例子：
代码：
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
background-color: #008888;
}
#wikipedia{
position: relative;
margin:auto;
margin-top:200px;
width: 500px;
height: 500px;
background-image: radial-gradient(circle at 100px 300px,black 100px,#fff 300px,red 100%);
/*background-image: linear-gradient(60deg,black 50px,red 60px,#fff 100px);*/
background-repeat: no-repeat;
}
#a{
position:absolute;
width:100px;
height:100px;
bottom:200px;
left:100px;
background-color: rgba(31,131,33,0.3);
}
</style>
</head>
<body>
<section class="flex-continer" id="wikipedia">
<div id="a"></div>
</section>
</body>
效果：
在这个例子中白色的位置在与以渐变中心点为圆心并与背景区域顶部相切的圆上。从白色渐变到白色的渐变带的宽度为200px（300px - 100px）。
repeating-radial-gradient()
repeating-radial-gradient()设置重复径向渐变。
语法与radial-gradient()的语法一样：
repeating-radial-gradient(
[[ circle || <length> ] [at <position>]? , |
[ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , |
[[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , |
at <position> , <color-stop> [ , <color-stop> ]+ )
原理与重复线性渐变的原理相通（不是相同）。第一个颜色名后指定的位置，实际上是第一个重复单元的开始的位置，不指定就从渐变中心点开始。一般情况下最后一个颜色明后的位置与第一个颜色名后的位置的差值，就是一个重复单元在水平径向上的宽度。
看例子1、
代码：
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
background-color: #008888;
}
#wikipedia{
position: relative;
margin:auto;
margin-top:200px;
width: 500px;
height: 500px;
background-image: repeating-radial-gradient(ellipse 40px 30px at 100px 300px,black,#fff 100px,red 300px );
/*background-image: radial-gradient(circle at 100px 300px,black 100px,#fff 300px,red 100%);*/
background-repeat: no-repeat;
}
#a{
position:absolute;
width:300px;
height:225px;
bottom:200px;
left:100px;
background-color: rgba(31,131,33,0.3);
}
</style>
</head>
<body>
<section class="flex-continer" id="wikipedia">
<div id="a"></div>
</section>
</body>
效果：
在上面的例子中巧了，设置的椭圆的水平轴与垂直轴的比例刚好与图中蓝色线条围起来的矩形的宽与高的比例相同。如果我不设置水平轴与垂直轴，出来的效果与上图一样，也就是说呈现出来的径向渐变形状的水平轴与垂直轴的比例由设置的水平轴与垂直轴的比例决定（只是取其比例，不论具体数值）；不设置设置水平轴与垂直轴，就根据渐变中心点与gradient box的距渐变中心点最远的那个角（farthest-corner）围成的矩形的比例决定渐变的形状。
再看个例子2、
代码：
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
background-color: #008888;
}
#wikipedia{
position: relative;
margin:auto;
margin-top:200px;
width: 500px;
height: 500px;
background-image: repeating-radial-gradient(ellipse 30px 10px at 100px 300px,black 90px,#fff 150px,red 200px );
/*background-image: radial-gradient(circle at 100px 300px,black 100px,#fff 300px,red 100%);*/
background-repeat: no-repeat;
}
#a{
position:absolute;
width:90px;
height:30px;
bottom:200px;
left:100px;
background-color: rgba(31,131,33,0.5);
}
</style>
</head>
<body>
<section class="flex-continer" id="wikipedia">
<div id="a"></div>
</section>
</body>
效果：
指定的椭圆水平轴与垂直轴的比例为30px : 10px = 3 : 1，第一个重复的位置开始的位置在水平方向上距离渐变中心点90px处，绿色小方框的宽为90px，高为30px，是根据 3 : 1 的比例算出来的。
上面只是看了一般情况的例子，不一般的情况没有举例。在官方文档中 3.4小节中有说明（链接在下面参考文章中）。
（完）
参考文章：
CSS 3 学习——渐变的更多相关文章
- CSS入门级学习
css入门学习1:认识CSS 1.1:css简介,css全称是层叠样式表,Cascading style sheets 1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式,如文字大小 ...
- css居中学习笔记
css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...
- HTML&CSS基础学习笔记—创建列表
创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...
- 纯css使用线性渐变实现滚动进度条(来自于微信前端早读课）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS 3 学习笔记
css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal: 控制连续文本换行.break-word: 内容将在边界内换行.如果需要,词 ...
- （2）《Head First HTML与CSS》学习笔记---img与基于标准的HTML5
1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...
- （6）《Head First HTML与CSS》学习笔记---结尾、《HTML5权威指南》读书笔记
1.内联元素的外边距.内边距与块元素稍有不同. 如果一个内联元素四周都增加外边距,只能看到左边和右边会增加空间:你也可以对内联元素的上下增加内边距,不过这个内边距不会影响包围它的其他内联元素的间距—— ...
- 前端学习：CSS的学习总结(图解）
前端学习:CSS的学习总结(图解) CSS代码笔记 CSS简介 css的引入方式和书写规范 CSS选择器 CSS属性 CSS盒子模型 CSS的定位
- 11种常用css样式学习大结局滚动条与显示隐藏
滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...
随机推荐
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- Http状态码之：301、302重定向
概念 301 Moved Permanently 被请求的资源已永久移动到新位置,并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一.如果可能,拥有链接编辑功能的客户端应当自动把请求的地 ...
- 发布：.NET开发人员必备的可视化调试工具（你值的拥有）
1:如何使用 1:点击下载:.NET可视化调试工具 (更新于2016-12-29 19:11:00) (终于彻底兼容了部分VS环境下无法使用的问题) 2:解压RAR后执行:CYQ.VisualierS ...
- 6. ModelDriven拦截器、Preparable 拦截器
1. 问题 Struts2 的 Action 我们将它定义为一个控制器,但是由于在 Action 中也可以来编写一些业务逻辑,也有人会在 Action 输入业务逻辑层. 但是在企业开发中,我们一般会将 ...
- linux应用调试技术之GDB和GDBServer
1.调试原理 GDB调试是应用程序在开发板上运行,然后在PC机上对开发板上得应用程序进行调试,PC机运行GDB,开发板上运行GDBServer.在应用程序调试的时候,pc机上的gdb向开发板上的GDB ...
- 【知识必备】ezSQL，最好用的数据库操作类，让php操作sql更简单~
最近用php做了点小东东,用上了ezSQL,感觉真的很ez,所以拿来跟大家分享一下~ ezSQL是一个非常好用的PHP数据库操作类.著名的开源博客WordPress的数据库操作就使用了ezSQL的My ...
- 微信小程序前端源码逻辑和工作流
看完微信小程序的前端代码真的让我热血沸腾啊,代码逻辑和设计一目了然,没有多余的东西,真的是大道至简. 废话不多说,直接分析前端代码.个人观点,难免有疏漏,仅供参考. 文件基本结构: 先看入口app.j ...
- Android事件分发机制浅谈(一)
---恢复内容开始--- 一.是什么 我们首先要了解什么是事件分发,通俗的讲就是,当一个触摸事件发生的时候,从一个窗口到一个视图,再到一个视图,直至被消费的过程. 二.做什么 在深入学习android ...
- git添加GitHub远程库
已经在本地创建了一个Git仓库后,又想在GitHub创建一个Git仓库,并且让这两个仓库进行远程同步,这样,GitHub上的仓库既可以作为备份,又可以让其他人通过该仓库来协作 首先,登陆GitHub, ...
- python性能检测工具整理
python 运行后出现core dump产生core.**文件,可通过gdb来调试 Using GDB with a core dump having found build/python/core ...