一真的小站

鳶飛魚躍,無處不是化境。

0%

十七、渐变

十七、渐变

渐变:

渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变

线性渐变

1.linear-gradient线性渐变指沿着某条值线朝一个方向产生渐变效果

a)语法:

1
linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*)

b)参数说明:

第一个参数表示线性渐变的方向,
1.to left:设置渐变为从右到左。相当于:270deg;
2.to right:设置渐变从左到右。相当于:90deg;
3.to top:设置渐变从下到上。相当于:0deg;
4.to bottom:设置渐变从上到下。相当于:180deg。这是默认值,等同于留空不写。也可以直接指定度数,如45deg
第二个参数是起点颜色,可以指定颜色的位置
第三个参数[,]是终点颜色,你还可以在后面添加更多的参数,表示多种颜色的渐变

c) 样例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
<style>
diV {
width: 300px;
height: 300px;
/*添加渐变:渐变不是一个单一钩,它产生的是图像,所以需要使用
background*/
/*1inear-gradient(方向,开始颜色位置,颜色2位置,颜色3位置.…);*/
/*方向:
to top:edeg to right:9edegI to bottom:18edeg--默认址
to left:270deg*/
background: linear-gradient(to right,red,blue);
background: linear-gradient(to right,red 0%,red 50%,blue 50%,blue 100%);
}
</style>
</head>

径向渐变

2.radial-gradient径向渐变指从一个中心点开始沿着四周产渐变效果

a)语法:

1
<radial-gradient>=radial-gradient([[<shape>ll<size>][at ]?,I at <position>,]?<color-stop>[,<color-stop>]+)

b)取值:
i.确定圆心的位置。如果提供2个参数,第一个表示横坐标,第二个表示纵坐标;如果只提供一个,第二值默认为50%,即center

i.shape:渐变的形状,ellipse表示椭圆形,circle表示圆形。默认为ellipse,如果元素形状为正方形的元素,则ellipse和circle显示一样

ii.size:渐变的大小,即渐变到哪里停止,它有四个值。closest-side:最近边;farthest-side:最远边;closest-corner:最近角;farthest-corner:最远角。默认是最远的角farthest-corner

iv.:指定颜色。Rgba hsla

c) 样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<head>
<style>
div {
width: 300px;
height: 200px;
/*添加径向渐变:产生也是图像*/
/*background:radial-gradient(red,blue);*/
/*语法:radial-gradient(形状大小坐标):
形状shape:circle:产生正方形的渐变色ellipse:适配当前的形状,如果是正方形的容器,两者效果一样
at position:坐标,默认在正中心。可以赋值坐标(参照元素的左上角),也可以赋值关键字(left center right top bottom)
大小size:closest-side:最近边;farthest-side:最远边;closest-corner:最近角;farthest-corner:最远角。默认是最远的角farthest-corner*/
/*background:radial-gradient(circle,red,blueI;*/
/* background: radial-gradient(circle at 50px 50px, red, blue); */
/*background:radial-gradient(at left top,red,blue);*/
/* 设置颜色的位置 */
background: radial-gradient(red, red 50%, blue 50%, blue);
}
</style>
</head>

重复渐变

样式:

1
2
3
4
5
6
7
8
9
<head>
<style>
div {
width: 300px;
height: 200px;
background:repeating-radial-gradient(circle closest-side at center center,
#fff 0%,#fff 18%,#000 10%,#000 20%);
</style>
</head>