linear-gradient

linear-gradient

1
linear-gradient([<angle> | to <side-or-corner>]? , <color-stop-list>)

渐变角度

第一个参数是渐变的角度,接受一个表示角度的值(如:degradgrad、或 turn)或表示方向的关键词(toprightbottomleftleft toptop rightbottom rightleft bottom)。

渐变容器

渐变图像可见区域是由渐变容器大小来决定的。

通常,如果给一个 DOM 元素的 background-image 使用 linear-gradient,那么其(渐变)显示区域就是元素的 border-box 区域。其实也是 background-color 或者说通过 url 引入背景图像的显示区域。

然而,如果你通过 CSS 的 background-size 设置一个尺寸,比如说 200px * 200px,这个时候渐变容器(渐变尺寸)就是 background-size 设置的大小 200px * 200px。在没有使用 background-position 设置为其他值时,它默认是显示在DOM元素的左上角(也就是 background-position: left top)。

渐变线

linear-gradient是通过渐变的角度来控制渐变的方向。

C 点渐变容器中心点,A 是通过 C 点垂直线与通过 C 点渐变线的夹角,这个角称为渐变角度。

可以通过下面两种方法来定义这个角度:

  • 使用关键词:to topto bottomto leftto rightto top rightto top leftto bottom rightto bottom left
  • 使用带单位数字定义角度,比如 45deg1turn

如果省略角度值的设置,那默认是 to bottom(对应 180deg 或者 .5turn):

渐变线长度

如果 W 是渐变容器的宽度,H 是渐变容器的高度,A 是渐变角度,那么渐变线的长度可以通过下面的公式计算

1
abs(W * sin(A)) + abs(H * cos(A))

渐变色节点(Color stops)

渐变色的每一个可以这样定义:

1
<color> [<percentage> | <length>]?

如果没有显式指定颜色在渐变线上的位置,这将交给浏览器来确定颜色在渐变线上的位置。最简单的情况下只有两个颜色,颜色1将被放置在渐变线 0% 位置(渐变线开始位置),颜色2将被放置在 100% 位置处(渐变线的结束点)。如果有三个颜色,那么颜色1在渐变线的 0%,颜色2在渐变线的 50%,颜色3在渐变线的 100%。在上面的这个示例中,有五个颜色,那么它们的位置分别在 0%25%50%75%100%它们将沿着渐变线平均分布渐变颜色

img

上图中,有七个颜色,其中下一个颜色是在上一个颜色开始位置,这意味浏览器不需要填满两个颜色之余间的空间。

后面颜色的 color-stop 比前面的值小时,按前面的 color-stop 计算

1
2
> linear-gradient(#ccc 1px, #fff 0) === linear-gradient(#ccc 1px, #fff 1px);
>

Demo

绘制网格

1
<div class="grid"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
body {
text-align: center;

.grid {
display: inline-block;
margin-top: 50px;
background-image:
repeating-linear-gradient(#ccc, #ccc 1px, transparent 1px, transparent 50px),
repeating-linear-gradient(to right, #ccc, #ccc 1px, transparent 1px, transparent 50px);
width: 301px;
height: 301px;
}
}

数量加减

1
2
3
4
5
<div class="demo">
<a disabled class="minus"></a>
<input value='1' type="text"/>
<a class="plus"></a>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.demo {
color: #333;
display: flex;
align-items: center;

input {
padding: 5px 10px;
border: 1px solid #ccc;
height: 18px;
width: 15px;
box-shadow: none;
text-align: center;
}

.plus,
.minus {
background: #fff no-repeat center;
background-origin: padding-box;
padding: 5px 10px;
width: 10px;
height: 20px;
vertical-align: middle;
display: inline-block;
cursor: pointer;

&[disabled] {
color: #ccc;
cursor: default;
}
}

.minus {
background-image: linear-gradient(currentColor, currentColor);
background-size: 10px 2px;
background-position: center;
}

.plus {
background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
background-size: 10px 2px, 2px 10px;
background-position: center, center;
}
}

虚线

1
<div class="dashed"></div>
1
2
3
4
.dashed {
height: 1px;
background-image: repeating-linear-gradient(to right, #ccc 0, #ccc 10px, transparent 0, transparent 20px);
}

对话框三角线框

1
<div class="talk"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
body {
text-align: center;
padding: 50px;

.talk {
position: relative;
width: 200px;
height: 50px;
border: 1px solid #ccc;
display: inline-block;
background-color: #fff;

&::before {
content: '';
width: 6px;
height: 6px;
position: absolute;
left: -4px;
top: 22px;
background-image:
linear-gradient(to top, #ccc, #ccc),
linear-gradient(to right, #ccc, #ccc),
linear-gradient(135deg, #fff, #fff 6px, transparent 6px);
background-repeat: no-repeat;
background-size: 6px 1px, 1px 6px, 6px 6px;
transform: rotate(-45deg);
}
}
}

折角效果

1
<div class="dog-ear"></div>
1
2
3
4
5
6
7
.dog-ear {
width: 300px;
height: 300px;
background:
linear-gradient(225deg, transparent 50%, rgba(blue, .5)) no-repeat 100% 0 / 42.4px 42.4px,
linear-gradient(225deg, transparent 30px, #ccc 0);
}

其它

  • 调试工具

    可以使用这个工具调试渐变效果以及渐变线,渐变角度和渐变颜色的位置

  • 效果预览

    渐变效果预览

参考