金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > Css背景渐变

Css背景渐变

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-06 13:50

CSS Gradient详解

2016/03/06 · CSS · Gradient

原文出处: AlloyTeam   

CSS3 渐变(Gradients)

语法:

一、Background的基本属性

属性 描述
background-color 背景颜色
background-image 背景图像
background-position 图像的开始位置
background-repeat 是否及如何重复背景图像
background-size 背景图片的尺寸
background-clip 背景的绘制区域
background-origin 背景图片的定位区域
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
  • background-color:
属性 描述
关键字 red、blue、yello...
RGB #fff白色、#000黑色
transparent 背景透明
  • background-image:url(背景图片的路径);
  • background-position:
属性 描述
top left 从左上端开始重复,top center / top right同
center left 从左侧中部开始重复),center center /center right 同
bottom left 从左侧下端开始重复),bottom center /bottom right 同
x% y% 使用百分比,左上角是0%0%,右下角是100%100%
x y 使用具体数值,单位px,0px 0px表示左上角
  • background-origin:
    background-origin 属性规定 background-position 属性相对于什么位置来定位。
属性 描述
padding-box 背景图像相对于内边距框来定位
border-box 背景图像相对于边框盒来定位
bottom left 背景图像相对于内容框来定位
content-box 使用百分比,左上角是0%0%,右下角是100%100%
x y 使用具体数值,单位px,0px 0px表示左上角
  • background-repeat:
属性 描述
no-repeat 不重复平铺
repeat-x 水平平铺
repeat-y 垂直平铺
  • background-clip:
属性 描述
border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框
  • background-size:
属性 描述
length 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"
percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中
contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
  • background-attachment:
属性 描述
scroll 默认,图像会随着页面其余部分滚动而移动
fixed 当页面其余部分滚动时图像不移动
inherit 从父类继承
  • #### background复合写法

background:red url(body_bj.jpg) no-repeat fixed top;各种属性值之间用空格隔开

前言

现在设计师同学越来越高大上了,纯色背景已经不能满足人民群众日益增长的物质文化需要了,必须整渐变背景o(╯□╰)o。怎么还原呢,设计师直接丢过来一个几十K的图片,这怎么行。。。

还好我们有CSS第三代!这次就来唠唠CSS3 Gradient(/ˈgreɪdɪənt/)的用法。

 

CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。
CSS3 定义了两种类型的渐变(gradients):
线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
径向渐变(Radial Gradients)- 由它们的中心定义

background:linear-gradient( 渐变方向,起点颜色,终点颜色 )

二、渐变背景的写法

background-image: linear-gradient([设置方向/角度],[设置开始颜色],[设置多种过度颜色])
如:background-image: linear-gradient(50deg, #fff,#000);
background-image: linear-gradient(to top, #fff,#000);

角度 英文 描述
0deg to top 从下向上
90deg to right 从左到右
180deg to bottom 从上到下
270deg to left 从右到左
to top left 从右下角到左上角
to top right 从左下角到右上角
  • 线性渐变:background-image:linear-gradient / repeating-linear-gradient
    1.两种颜色的渐变
    background-image: linear-gradient(black, red);

图片 1

2.渐变距离的控制
background-image:linear-gradient(to right, black 5px, red 60px, yellow 100px);

图片 2

每一个值的含义:
to right: 背景色执行从左到右的渐变
black 5px:0px-5px为黑色
red 60px:5px-60px为黑色向红色的渐变
yellow 100px:60px-100px为红色向黄色的渐变
每两种颜色之间的渐变的距离为位置差。
如果后一个颜色的起始位置的值小于前一个颜色的起始位置的值,则这两种颜色的渐变距离为0,变成直接的颜色变化。最后一个颜色可不设置起始位置的值,默认渐变至总长度(这里指div宽度)的末尾。如果最后一个颜色起始位置的值小于总长度的值,则从该值开始至总长度的末尾由该颜色值纯色填充。

也可以使用百分比background-image:linear-gradient(left, black 10%, red 30%, yellow 50%, purple 100%);解释同上。

3.不同角度的渐变

图片 3

图片 4

background-image: linear-gradient(0deg, yellow, red);

图片 5

background-image: linear-gradient(45deg, yellow, red);

图片 6

正数是顺时针转,负数是逆时针转

  • 径向渐变: background-image:radial-gradient / repeating-radial-gradient


background-image:radial-gradient(100px at 50% 50% , white 0%, red 50%, yellow 99%,transparent 99%);

图片 7

每个值代表的含义:
50px:半径为50px
50% 50%:圆心在元素的中心点
white 0%:圆心白色
red 50%:圆心至半径50%处由白色渐变至红色
yellow 99%:从半径50%处至99%处红色渐变至黄色
transparent 99%:半径长度的99%至99%由黄色渐变透明

注:transparent 99%(或0%-99%)是为圆规定在99%之后至100%的背景色为透明,如果除去这个设置,那剩余部分将会被前一个背景色填充,当然,现在这个值在这里是99%,在其他地方也可以是其他值,根据上一个颜色的相对圆心的距离确定范围。

椭圆
background-image:radial-gradient( ellipse farthest-corner at 30% 30% , white 0%, red 20%, purple 30%, transparent 30%);

图片 8

每个值代表的含义:
ellipse:圆的类型是椭圆
farthest-corner:以靠近圆心的最远的一个角(椭圆所在元素的角)为基准来规定椭圆的大小。
farthest-side:以靠近圆心的最远的一条边为基准来规定椭圆的大小。
closest-side: 以靠近圆心的最近的一条边为基准来规定椭圆的大小。
closest-corner:以靠近圆心的最近的一个角(椭圆所在元素的角)为基准来规定椭圆的大小。
at 30% 30%:以上图为例,规定的是farthest-corner,这时候最远的角是div的点D所在的角(最近的角是点A所在位置的角,最近的边是AB边,最远的边是BD边),且椭圆为30%的规格,圆心是点O,OF:OD = 3:10,所谓的30%便是这么得来的。

...其余规则以此类推...

  • 渐变的repeat:

线性repeat
background-image:repeating-linear-gradient(180deg, transparent, transparent 5px, black 5px, black 10px),repeating-linear-gradient(90deg, transparent, transparent 5px, black 5px, black 10px);

图片 9

background-image:repeating-linear-gradient(180deg, transparent, transparent 5px, black 5px, black 6px),repeating-linear-gradient(90deg, transparent, transparent 5px, black 5px, black 6px);

图片 10

径向repeat
background-image: repeating-radial-gradient(circle, black, black 5px, white 5px, white 10px);

图片 11

background-image:repeating-radial-gradient(ellipse, black, black 5px, white 5px, white 10px);

图片 12

兼容性

从Can I use上看,现代浏览器支持程度良好,尤其移动端,对于不支持的浏览器,下文会提供一种采用纯色的降级方案。

图片 13

但是各种兼容性问题肯定免不了,Gradient和Flex box一样eggache,总共有三种语法规则,而且差异很大。。。

这里为了讨论简单,我们只涉及最新的语法(基本能覆盖大量新浏览器了)。老旧语法规则和IE等各浏览器的兼容方法请见参考文章的2、3有详细的介绍,也可以使用Gradient Generator或者autoprefixer自动生成代码。

CSS3 线性渐变

参数说明:

前置知识

1、绘制区域,也就是规范中所谓的gradient box(为了理解无歧义,下文不再翻译该术语),跟所关联DOM的实际尺寸有关,比如,设定background的话,绘制区域就是DOM的padding box,除非用backgroud-size指定大小;如果是设定list-style-image,绘制区域就是1em的正方形。

2、从W3C的描述中可以知道,浏览器实际是根据Gradient指定的语法来生成对应的图片

        A gradient is an image that smoothly fades from one color to another.

而且不只background可以用,比如

CSS

background: linear-gradient(white, gray); list-style-image: radial-gradient(circle, #006, #00a 90%, #0000af 100%, white 100%);

1
2
background: linear-gradient(white, gray);
list-style-image: radial-gradient(circle, #006, #00a 90%, #0000af 100%, white 100%);

3、由于是image,所以用于background时,实际是设置在background-image上,如果只是单纯的渐变颜色,可以用以下的样式来对不支持的老旧浏览器做降级处理

CSS

.gradient { /* can be treated like a fallback */ background-color: red; /* will be "on top", if browser supports it */ background-image: linear-gradient(red, orange); }

1
2
3
4
5
6
.gradient {
/* can be treated like a fallback */
  background-color: red;
/* will be "on top", if browser supports it */
  background-image: linear-gradient(red, orange);
}

原理就借用慕课网的一张图:

图片 14

Gradient有几个子特性,下面一一列出。

默认由上到下的渐变
background: linear-gradient(red, blue); /* 标准的语法 */

渐变方向:可以使用top,left,或者指定具体的角度(deg为单位),比如top是自上而下渐变,left是自左向右渐变。同时也可将两者结合起来,比如top left表示自左上方向右下方渐变。

线性渐变(linear-gradient)

语法如下:

CSS

linear-gradient() = linear-gradient( [ | to ]?, <color-stop-list> ) <side-or-corner> = [left | right] || [top | bottom]

1
2
3
4
5
linear-gradient() = linear-gradient(
  [ | to ]?,
  <color-stop-list>
)
<side-or-corner> = [left | right] || [top | bottom]

第一个参数指明了颜色渐变的方向:

  • 可以是角度,比如0deg,表示正上方向,90deg表示向右(顺时针)
  • 也可以是关键词,比如to top, to right, to bottom, to left, 分别对应了0deg, 90deg, 180deg, 270deg。当然也可以不指定,默认值是to bottom

第二个参数指明了颜色断点(即color-stop)。位置可以省略,第一个默认为0%,最后一个默认为100%,如果中间的值没有指定,则按颜色数目求均值,比如

CSS

linear-gradient(red 40%, white, black, blue) /*等价于*/ linear-gradient(red 40%, white 60%, black 80%, blue 100%)

1
2
3
linear-gradient(red 40%, white, black, blue)
/*等价于*/
linear-gradient(red 40%, white 60%, black 80%, blue 100%)

更多边界情况可以参考W3C规范,建议位置都采用同样的单位,避免产生意外情况。

为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。
background: linear-gradient(to right, red , blue); /* 标准的语法 /
background: -moz-linear-gradient(right, red, blue); /
Firefox 3.6 - 15 */

起点颜色,终点颜色:这不是固定的两个参数,其中可以插入多个颜色值.

浏览器是如何绘制渐变线的呢?

如下图,从gradient box的中心(对角线交点)开始以CSS中指定的角度向两侧延伸,终点是gradient box的一个相近顶点到gradient line垂线的垂足,起点也是类似的求法,两点间的距离就是gradient line的长度(浓浓的初中几何味~)。

图片 15

所以,gradient line的长度计算公式是:

CSS

abs(W * sin(A)) + abs(H * cos(A)) A是角度,W是gradient box的宽,H为高

1
2
abs(W * sin(A)) + abs(H * cos(A))
A是角度,W是gradient box的宽,H为高

是不是看完有种然并卵的感觉:前端工程师哪里需要知道这些鬼啊。

非也非也,在开发UI的时候,清楚的知道浏览器原理,才能在脑中根据视觉稿正确的解构出CSS代码,否则只能在那里傻傻的试了又试。

栗子一

以下的写法效果其实都一样

CSS

kground-image: linear-gradient(yellow, green); // 默认方向为to bottom background-image: linear-gradient(to bottom, yellow, green); // 使用关键字指定方向 background-image: linear-gradient(180deg, yellow, green); // 使用角度指定方向 background-image: linear-gradient(to top, green, yellow); background-image: linear-gradient(to bottom, yellow 0%, green 100%); // 指定颜色断点

1
2
3
4
5
kground-image: linear-gradient(yellow, green); // 默认方向为to bottom
  background-image: linear-gradient(to bottom, yellow, green); // 使用关键字指定方向
  background-image: linear-gradient(180deg, yellow, green); // 使用角度指定方向
  background-image: linear-gradient(to top, green, yellow);
  background-image: linear-gradient(to bottom, yellow 0%, green 100%); // 指定颜色断点

图片 16

栗子二

当然多个颜色断点也可以:

CSS

background-image: linear-gradient(to bottom, #FF0000 14.28%, #FFA500 14.28%, #FFA500 28.57%, #FFFF00 28.57%, #FFFF00 42.85%, #008000 42.85%, #008000 57.14%, #0000FF 57.14%, #0000FF 71.42%, #4B0082 71.42%, #4B0082 85.71%, #800880 85.71%, #800880 100%);

1
background-image: linear-gradient(to bottom, #FF0000 14.28%, #FFA500 14.28%, #FFA500 28.57%, #FFFF00 28.57%, #FFFF00 42.85%, #008000 42.85%, #008000 57.14%, #0000FF 57.14%, #0000FF 71.42%, #4B0082 71.42%, #4B0082 85.71%, #800880 85.71%, #800880 100%);

图片 17

这个例子还有个小技巧,Gradient中两个不同颜色间默认是渐变的,但如果我们需要做出图中这种颜色明显变化的效果(锐变),就可以用同一个位置不同颜色的方式实现。

栗子三

在颜色上设置透明度渐变

CSS

gradient-1 { background-image:url(); background-size: 100% 100%; } .gradient-2 { background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), url() no-repeat; background-size: 100% 100%; }

1
2
3
4
5
6
7
8
9
gradient-1 {
  background-image: url(http://a57.foxnews.com/global.fncstatic.com/static/managed/img/fn2/876/493/EmmaWatsonBrown.jpg);
  background-size: 100% 100%;
}
 
.gradient-2 {
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), url(http://a57.foxnews.com/global.fncstatic.com/static/managed/img/fn2/876/493/EmmaWatsonBrown.jpg) no-repeat;
  background-size: 100% 100%;
}

效果如下,左边原图,右边增加了一层遮罩,这个效果其实是利用了CSS3的多背景语法

图片 18

更多例子可以在这里看 

线性渐变 - 对角
你可以通过指定水平和垂直的起始位置来制作一个对角渐变。
下面的实例演示了从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到蓝色:
background: linear-gradient(to bottom right, red , blue); /* 标准的语法 /
background: -moz-linear-gradient(bottom right, red, blue); /
Firefox 3.6 - 15 */

举例:

径向渐变(radial-gradient)

radial gradient其实就是颜色从一个点以同心圆或者椭圆向外渐变。

图片 19

简化版语法如下:

CSS

radial-gradient() = radial-gradient( [ || ]? [ at ]? , <color-stop-list> )

1
2
3
4
radial-gradient() = radial-gradient(
  [ || ]? [ at ]? ,
  <color-stop-list>
)
  • position用来指定渐变圆心的位置,默认为center,赋值规则与background-positon的类似;
  • ending-shape可以是circle或者elipse,如果省略,则默认值与size相关,size指定一个值就是圆形,否则是椭圆;
  • size可以是具体的值,也可以用关键字指定,默认值是farthest-corner。如果是具体值,圆形需要一个数值,椭圆需要两个。关键字则包括:
    • closest-side 指gradient box某一边到盒子中心最近的距离;
    • farthest-side 指gradient box某一边到盒子中心最远的距离;
    • closest-corner 指gradient box某一顶点到盒子中心最近的距离;
    • farthest-corner 指gradient box某一顶点到盒子中心最远的距离;
  • color-stop-list与linear-gradient类似

注意:

  • size的数值不能是负数
  • W3C规范规定,百分比的数值只能用于椭圆,不能用于圆形。
  • position的值可以是负数

所以,复杂版语法如下:

CSS

radial-gradient() = radial-gradient( [ [ circle || ] [ at ]? , | [ ellipse || [ | ]{2} ] [ at ]? , | [ [ circle | ellipse ] || ] [ at ]? , | at <position> , ]? <color-stop> [ , ]+ ) <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side

1
2
3
4
5
6
7
8
9
10
radial-gradient() = radial-gradient(
  [ [ circle               || ]                          [ at ]? , |
    [ ellipse              || [ | ]{2} ]    [ at ]? , |
    [ [ circle | ellipse ] || ]                  [ at ]? , |
    at <position> ,
  ]?
  <color-stop> [ ,
]+
)
<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side

栗子一

以下几种写法是等价的

CSS

.gradient-1 { background-image: radial-gradient(yellow, green); } .gradient-2 { background-image: radial-gradient(ellipse at center, yellow 0%, green 100%); } .gradient-3 { background-image: radial-gradient(farthest-corner at 50% 50%, yellow, green); } .gradient-4 { background-image: radial-gradient(ellipse farthest-corner at 50% 50%, yellow, green); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.gradient-1 {
  background-image: radial-gradient(yellow, green);
}
 
.gradient-2 {
  background-image: radial-gradient(ellipse at center, yellow 0%, green 100%);
}
 
.gradient-3 {
  background-image: radial-gradient(farthest-corner at 50% 50%, yellow, green);
}
 
.gradient-4 {
  background-image: radial-gradient(ellipse farthest-corner at 50% 50%, yellow, green);
}

图片 20

栗子二

看下size各种关键字的效果

CSS

.gradient-1 { background-image: radial-gradient(circle closest-side at 30% 50%, yellow, green); } .gradient-2 { background-image: radial-gradient(circle farthest-side at 30% 50%, yellow, green); } .gradient-3 { background-image: radial-gradient(circle closest-corner at 30% 50%, yellow, green); } .gradient-4 { background-image: radial-gradient(circle farthest-corner at 30% 50%, yellow, green); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.gradient-1 {
  background-image: radial-gradient(circle closest-side at 30% 50%, yellow, green);
}
 
.gradient-2 {
  background-image: radial-gradient(circle farthest-side at 30% 50%, yellow, green);
}
 
.gradient-3 {
  background-image: radial-gradient(circle closest-corner at 30% 50%, yellow, green);
}
 
.gradient-4 {
  background-image: radial-gradient(circle farthest-corner at 30% 50%, yellow, green);
}

图片 21

圆心没设置在中心是因为矩形的对角线相等且平分,所以closest-corner = farthest-corner,就没法比较差异了。

使用角度
如果你想要在渐变的方向上做更多的控制,你可以定义一个角度,而不用预定义方向(to bottom、to top、to right、to left、to bottom right,等等)。
background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */

使用关键字

重复渐变(Repeating Gradients)

基本语法与上面的线性渐变和径向渐变类似,就是增加了重复的特性。

从Can I use的数据看目前支持程度不乐观,PC除了IE都还不错,移动端Android4.0以下都红o(╯□╰)o。。

但是了解下还是必要的

图片 22

 

重复的规则简单说就是用最后一个颜色断点的位置减去第一个颜色断点位置的距离作为区间长度,不断的重复。比如repeating-linear-gradient(red 10px, blue 50px) 就相当于linear-gradient(…, red -30px, blue 10px, red 10px, blue 50px, red 50px, blue 90px, …)

至于首尾颜色距离为0等特殊情况,这里就不细说 了,可以到W3C规范自行研究。

栗子

CSS

div { width: 100px; height: 100px; margin: 10px; border: 1px solid blue; float: left; } .repeat-linear { background-image: repeating-linear-gradient( 45deg, white, white 10px, red 10px, red 20px); } .repeat-radial { background: repeating-radial-gradient( circle at bottom left, white, white 10px, red 10px, red 20px); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid blue;
  float: left;
}
 
.repeat-linear {
  background-image: repeating-linear-gradient( 45deg, white, white 10px, red 10px, red 20px);
}
 
.repeat-radial {
  background: repeating-radial-gradient( circle at bottom left, white, white 10px, red 10px, red 20px);
}

图片 23

根据上面说的规则,这个例子里的区间长度是首尾颜色的位置之差,是20px。

我们可以验证下,两张图里都有约7个红白条,矩形宽高均100px,对角线则是约140px,140px/7=20px,bingo!

注:本文例子的代码在codepen可以查看

带有指定的角度的线性渐变:
background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 /
background: linear-gradient(180deg, red, blue); /
标准的语法 */

代码:

参考文章

  1. W3C: Gradients
  2. CSS-Tricks: CSS Gradients
  3. 大漠:CSS3 Gradient
  4. MDN: CSS linear-graient(), radial-gradient(), Using CSS gradients

    1 赞 2 收藏 评论

图片 24

下面的实例演示了如何创建一个带有彩虹颜色和文本的线性渐变:
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);

#gradient1{   
    width:200px;   
    height:200px;   
    background:linear-gradient(top,#000,#FFF);/*自上向下渐变*/}   
#gradient2{   
    width:200px;   
    height:200px;   
    background:linear-gradient(left,#000,#FFF);/*自左向右渐变*/}   
#gradient3{   
    width:200px;   
    height:200px;   
    background:linear-gradient(top left,#000,#FFF);/*自左上角向右下角渐变*/}  

使用透明度(Transparency)
CSS3 渐变也支持透明度(transparency),可用于创建减弱变淡的效果。
为了添加透明度,我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。
下面的实例演示了从左边开始的线性渐变。起点是完全透明,慢慢过渡到完全不透明的红色:

 

background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */

        
使用角度

重复的线性渐变
repeating-linear-gradient() 函数用于重复线性渐变:
background: linear-gradient( color 45%,color 65%, color 65%,color 100%);

代码

CSS3 径向渐变
径向渐变由它的中心定义。
为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(原型或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。

#gradient1{   
    background:linear-gradient(0deg,#000,#FFF);}   
#gradient2{   
    background:linear-gradient(60deg,#000,#FFF);}   
#gradient3{   
    background:linear-gradient(90deg,#000,#FFF);}   
#gradient4{   
    background:linear-gradient(180deg,#000,#FFF);}   
#gradient5{   
    background:linear-gradient(270deg,#000,#FFF);}  

语法:
background: radial-gradient(center, shape size, start-color, ..., last-color);

 

径向渐变 - 颜色结点不均匀分布
background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 /
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /
Firefox 3.6 - 15 */

                
可以看出使用角度就可实现任意角度的线性渐变,可以这样理解使用角度渐变时的坐标系,如下图,箭头方向就是渐变方向(自*向*),角度呈顺时针变化,大家可以自己试一试验证一下。

设置形状
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。

        
组合使用

background: radial-gradient(circle, red, yellow, green); /* 标准的语法 /
background: -moz-radial-gradient(circle, red, yellow, green); /
Firefox 3.6 - 15 */

Top,left,right,bottom可以组合以实现不同的角度,但是角度与角度之间是不可以的,不要理所当然角度可以替代关键字。

不同尺寸大小关键字的使用
size 参数定义了渐变的大小。它可以是以下四个值:
closest-side
farthest-side
closest-corner
farthest-corner

(正确)linear-gradient(top left,#000,#FFF);

grad1 { /* Safari 5.1 - 6.0 / background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); / Opera 11.6 - 12.0 / background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); / Firefox 3.6 - 15 / background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); / 标准的语法 */ background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);}

(错误)linear-gradient(180deg 90deg,#000,#FFF);

grad2 { /* Safari 5.1 - 6.0 / background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); / Opera 11.6 - 12.0 / background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); / Firefox 3.6 - 15 / background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); / 标准的语法 */ background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);}

重复的径向渐变
repeating-radial-gradient() 函数用于重复径向渐变:

background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
background: repeating-radial-gradient(red, yellow 10%, green 15%);

指定颜色停止位置

                
我们可以通过百分比来设置颜色的停止点,默认值为0%,终点为100%;如上图所示。如果设置100%,这不会出现渐变效果

代码:

#gradient1{   
    background:linear-gradient(left,#000 20%,#FFF);}  

 
使用多个颜色值

                
代码

 

#gradient1{   
    background:linear-gradient(left,#F00, #0F0, #00F, #FF0, #0FF, #F0F);}  

径向渐变

语法:

radial-gradient([ [ 形状] || [形状尺寸] [ at 位置 ] ,起始颜色,结束颜色)

参数说明:

形状:可选值,可以指定渐变形状为圆形(circle)或者椭圆(ellipse),默认值为圆形。

形状尺寸:可选值,指定渐变形状的尺寸,若不指定默认值为farthest-side:

数值型:如果指定一个长度值,则表示为圆的半径,如果是两个值则第一个表示水平半径,第二个表示垂直半径(px或百分比)

closest-side:通过离渐变中心最近的边来确定圆的半径或者椭圆的垂直半径和水平半径;

closest-corner:通过离渐变中心最近的角来确定圆的半径或者椭圆的垂直半径和水平半径;

farthest-side:通过离渐变中心最远的的边来确定圆的半径或者椭圆的垂直半径和水平半径;

farthest-corner:通过离渐变中心最远的的角来确定圆的半径或者椭圆的垂直半径和水平半径;

位置:以at开头,用法同background-position,若不指定默认值为center;

起始位置和结束位置:同线性渐变

举例

不同的形状

        
closest-side与farthest-side

#gradient1{   
    width:400px;   
    height:200px;   
    background:radial-gradient(circle,#000,#FFF)}   
#gradient2{   
    width:400px;   
    height:200px;   
    background:radial-gradient(ellipse,#000,#FFF)}  

closest-side与closest-corner

                
closest-corner与farthest-corner

                

#gradient1{   
    width:200px;   
    height:300px;   
    background:radial-gradient(circle closest-corner at 20% 20%,#000,#FFF)}   
#gradient2{   
    width:200px;   
    height:300px;   
    background:radial-gradient(circle farthest-corner at 20% 20%,#000,#FFF)}  

重复渐变

语法:

repeating-linear-gradient(语法同上);

repeating-radial-gradient(语法同上);

举例

线性重复渐变最后一个颜色必须指定颜色的停止位置,不然就无法重复,因为默认单位停止位置是100%,如下:

        
代码:

#gradient1{   
    width:200px;   
    height:300px;   
    background-image: repeating-linear-gradient(#000,#FFF)}   
#gradient2{   
    width:200px;   
    height:300px;   
    background-image: repeating-linear-gradient(#000,#FFF 10%)}  

 
同样径向渐变的半径必须在可视的范围之内不然也看不到效果

        
代码

#gradient1{   
    width:200px;   
    height:300px;   
    background-image:repeating-radial-gradient(circle closest-corner,#000,#FFF)}   
#gradient2{   
    width:200px;   
    height:300px;   
    background-image:repeating-radial-gradient(circle closest-corner at 20% 20%,#000,#FFF)}  

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:Css背景渐变

关键词: