CSS渐变学习笔记

发表于 | 更新于 | 分类于

线性渐变

向下/向上/向左/向右/对角/其他方向。

上下、左右、对角

1
2
3
4
background: -webkit-linear-gradient( direction, color1, color2, ...);
background: -o-linear-gradient( direction, color1, color2, ...);
background: -moz-linear-gradient( direction, color1, color2, ...);
background: linear-gradient( direction, color1, color2, ...);

direction：

  • 默认：从上到下。
  • left：从左到右。
  • right：从右到左。
  • bottom right：从右下角到左上角。
  • bottom left：从左下角到右上角。


box1渐变为从上到下，box2为从右到左，box3为从右下到左上。

1
2
3
4
5
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.box1,
.box2,
.box3 {
    width: 100px;
    height: 100px;
    margin-right: 10px;
    float: left;}
.box1 {
    background: -webkit-linear-gradient( #ff712d, #816aa8);
    background: -o-linear-gradient( #ff712d, #816aa8);
    background: -moz-linear-gradient( #ff712d, #816aa8);
    background: linear-gradient( #ff712d, #816aa8);} /*从上到下*/
.box2 {
    background: -webkit-linear-gradient( right, #ff712d, #816aa8);
    background: -o-linear-gradient( right, #ff712d, #816aa8);
    background: -moz-linear-gradient( right, #ff712d, #816aa8);
    background: linear-gradient( right, #ff712d, #816aa8);} /*从右到左*/
.box3 {
    background: -webkit-linear-gradient( bottom right, #ff712d, #816aa8);
    background: -o-linear-gradient( bottom right, #ff712d, #816aa8);
    background: -moz-linear-gradient( bottom right, #ff712d, #816aa8);
    background: linear-gradient( bottom right, #ff712d, #816aa8);}  /*从右下到左上*/

角度

1
2
3
4
background: -webkit-linear-gradient( angle, color1, color2,...);
background: -o-linear-gradient( angle, color1, color2,...);
background: -moz-linear-gradient( angle, color1, color2,...);
background: linear-gradient( angle, color1, color2,...);

angle：

  • 0deg：从下到上。
  • 180deg：从上到下。
  • 90deg：从右到左。
  • -90deg：从左到右。


box1渐变为从上到下，box2为从右到左，box3为从右下到左上。

1
2
3
4
5
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.box1,
.box2,
.box3 {
    width: 100px;
    height: 100px;
    margin-right: 10px;
    float: left;}
.box1 {
    background: -webkit-linear-gradient( 180deg, #ff712d, #816aa8);
    background: -o-linear-gradient( 180deg, #ff712d, #816aa8;
    background: -moz-linear-gradient( 180deg, #ff712d, #816aa8);
    background: linear-gradient( 180deg, #ff712d, #816aa8);}
.box2 {
    background: -webkit-linear-gradient( -90deg, #ff712d, #816aa8);
    background: -o-linear-gradient( -90deg, #ff712d, #816aa8;
    background: -moz-linear-gradient( -90deg, #ff712d, #816aa8);
    background: linear-gradient( -90deg, #ff712d, #816aa8);}  /*从右到左*/ 
.box3 {
    background: -webkit-linear-gradient( -45deg, #ff712d, #816aa8;
    background: -o-linear-gradient( -45deg, #ff712d, #816aa8);
    background: -moz-linear-gradient( -45deg, #ff712d, #816aa8);
    background: linear-gradient( -45deg, #ff712d, #816aa8);}  /*从右下到左*/

重复的线性渐变

1
2
3
4
background: -webkit-repeating-linear-gradient( color1, color2, ... percent);
background: -o-repeating-linear-gradient( color1, color2, ... percent);
background: -moz-repeating-linear-gradient( color1, color2, ... percent);
background: repeating-linear-gradient( color1, color2, ... percent);


每个条带占10%，即重复10次。

1
2
3
<body>
    <div class="box"></div>
</body>

1
2
3
4
5
6
7
.box {
    width: 200px;
    height: 100px;
    background: -webkit-repeating-linear-gradient( #ff712d, #816aa8 10%);
    background: -o-repeating-linear-gradient( #ff712d, #816aa8 10%);
    background: -moz-repeating-linear-gradient( #ff712d, #816aa8 10%);
    background: repeating-linear-gradient( #ff712d, #816aa8 10%);}

css径向渐变

由中心向四周渐变。

1
2
3
4
background: -webkit-radial-gradient( center, shape size, start-color, ..., last-color);
background: -o-radial-gradient( center, shape size, start-color, ..., last-color);
background: -moz-radial-gradient( center, shape size, start-color, ..., last-color);
background: radial-gradient( center, shape size, start-color, ..., last-color);

center

center 属性规定渐变中心点。值为at x y（x，y可以用px或者%表示位置， 默认为图形中心）。

box1的渐变中心在(40px,40px)，box2的渐变中心在(60%,60%)。

1
2
3
4
<body>
    <div class="box1"></div> ‘
    <div class="box2"></div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box1,
.box2 {
    width: 200px;
    height: 200px;
    margin-right: 10px;
    float: left;}
.box1 {
    background: -webkit-radial-gradient( at 40px 40px, #ff712d, #816aa8, #3c398c);
    background: -o-radial-gradient( at 40px 40px, #ff712d, #816aa8, #3c398c);
    background: -moz-radial-gradient( at 40px 40px, #ff712d, #816aa8, #3c398c);
    background: radial-gradient( at 40px 40px, #ff712d, #816aa8, #3c398c);}
.box2 {
    background: -webkit-radial-gradient( at 60% 60%, #ff712d, #816aa8, #3c398c);
    background: -o-radial-gradient( at 60% 60%, #ff712d, #816aa8, #3c398c);
    background: -moz-radial-gradient( at 60% 60%, #ff712d, #816aa8, #3c398c);
    background: radial-gradient( at 60% 60%, #ff712d, #816aa8, #3c398c);}

shape

shape 属性规定渐变形状。值可取：circle（圆形）、ellipse（椭圆形） 。

box1渐变形状为圆形，box2渐变形状为椭圆。

1
2
3
4
<body>
    <div class="box1"></div> ‘
    <div class="box2"></div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box1,
.box2 {
    width: 400px;
    height: 300px;
    margin-right: 10px;
    float: left;}
.box1 {
    background: -webkit-radial-gradient( circle, #e1e1e1, #000000, #e1e1e1);
    background: -o-radial-gradient( circle, #e1e1e1, #000000, #e1e1e1);
    background: -moz-radial-gradient( circlr, #e1e1e1, #000000, #e1e1e1);
    background: radial-gradient( circle, #e1e1e1, #000000, #e1e1e1);}
.box2 {
    background: -webkit-radial-gradient( ellipse, #e1e1e1, #000000, #e1e1e1);
    background: -o-radial-gradient( ellipse #e1e1e1, #000000, #e1e1e1);
    background: -moz-radial-gradient( ellipse, #e1e1e1, #000000, #e1e1e1);
    background: radial-gradient( ellipse, #e1e1e1, #000000, #e1e1e1);}

size

size 规定渐变大小：

  • closest-side：渐变中心距离容器最近的边作为终止位置。
  • closest-corner：渐变中心距离容器最近的角作为终止位置。
  • farthest-side：渐变中心距离容器最远的边作为终止位置。
  • farthest-corner：渐变中心距离容器最远的角作为终止位置。

重复的径向渐变

1
2
3
4
background: -webkit-repeating-radial-gradient( color1, color2, ..., percent);
background: -o-repeating-radial-gradient( color1, color2, ..., percent);
background: -moz-repeating-radial-gradient( color1, color2, ..., percent);
background: repeating-radial-gradient( color1, color2, ..., percent);


每个条带占20%，即重复5次。

1
2
3
<body>
    <div class="box1"></div>
</body>

1
2
3
4
5
6
7
.box1 {
    width: 200px;
    height: 200px;
    background: -webkit-repeating-radial-gradient( #816aa8, #ff712d, #816aa8 20%);
    background: -o-repeating-radial-gradient( #816aa8, #ff712d, #816aa8 20%);
    background: -moz-repeating-radial-gradient( #816aa8, #ff712d, #816aa8 20%);
    background: repeating-radial-gradient( #816aa8, #ff712d, #816aa8 20%);}

边框渐变

1
2
3
4
5
border:width solid;
border-image: -webkit-linear-gradient( color1, color2 ) slice;
border-image: -o-linear-gradient( color1, color2 ) slice;
border-image: -moz-linear-gradient( color1, color2 ) slice;
border-image: linear-gradient( color1, color2 ) slice;
  • width：即为边框宽度 必须设置单位。
  • slice：偏移量 可以设定四个值，无单位。

如果缺少border:width solid则border-image无法被浏览器识别
如果slice值加了单位 则border-image无法被浏览器识别

box1设置偏移量，box2未设置偏移量

1
2
3
4
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.box1,
.box2 {
    margin-right: 10px;
    float: left;
    width: 100px;
    height: 100px;
    border: 30px solid;
    background: #fefdce;}
.box1 {
    border-image: -webkit-linear-gradient( #23d2fc, #b72afc)30;
    border-image: -o-linear-gradient( #23d2fc, #b72afc)30;
    border-image: -moz-linear-gradient( #23d2fc, #b72afc)30;
    border-image: linear-gradient( #23d2fc, #b72afc)30;} /*box1设置slice值*/
.box2 {
	border-image: -webkit-linear-gradient( #23d2fc, #b72afc);
	border-image: -o-linear-gradient( #23d2fc, #b72afc);
	border-image: -moz-linear-gradient( #23d2fc, #b72afc);
    border-image: linear-gradient( #23d2fc, #b72afc);} /*box2不设置slice值*/