Cyris's Sound
首页 标签 归档 友链 关于 RSS

CSS 中的渐变艺术

2021-04-17 CSS 渐变

CSS 中的渐变（gradient）有许多种形态，针对其语法与能实现的效果做一次系统性的整理。

<gradient> 包括：

  1. Linear gradient（线性渐变）
  2. Radial gradient（径向渐变）
  3. Repeating gradient（重复渐变）
  4. Conic gradient（锥形渐变）

1. Linear gradient

线性渐变，最常用的渐变形态。

完整语法：

1
2
3
4
5
6
7
8
9
linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list>)

/* types */
<angle>: [CSS <angle>](https://developer.mozilla.org/en-US/docs/Web/CSS/angle)
<side-or-corner>: [ left | right ] || [ top | bottom ]
<color-stop-list>: [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
    <linear-color-stop>: <color> [ <color-stop-length> ]?
        <color-stop-length>: [ <percentage> | <length> ]{1,2}
    <color-hint>: [ <percentage> | <length> ]

这里注意一下 side-or-corner 的语法：它包含两个关键词：第一个指出垂直位置 left or right，第二个指出水平位置 top or bottom。关键词的先后顺序无影响，且都是可选的。

基本用法

最基本的用法就是直接丢几个颜色进去，会渲染出一个自上而下的渐变色：

1
background: linear-gradient(white, #9198e5);

linear-gradient-demo-1

转个角度试试：

1
2
3
4
5
background: linear-gradient(0.25turn, white, #9198e5);
=
background: linear-gradient(90deg, white, #9198e5);
=
background: linear-gradient(to right, white, #9198e5);

linear-gradient-demo-2

颜色后面可以跟一个结束位置参数，准确的名字是 <linear-color-stop>，可以为百分比 %，也可以为 CSS 的各种单位 px, rem...

1
background: linear-gradient(to right, white 20%, #9198e5 80%);

linear-gradient-demo-3

这个百分比很好用，用 CSS 实现的渐变要比直接切图对屏幕的适应性更好。

还可以这样玩（background 有许多写法，下次整理一下单独写）：

1
2
3
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);

linear-gradient-demo-4

场景 Demo

用线性渐变搭配 CSS 动画可以做出一些炫酷的效果，比如这个按钮 Hover 效果（为了样式易读，未加 prefix，建议使用 Chrome 浏览器查看）：

liner-gradient-demo-hover-button

2. Radial gradient

径向（放射）渐变。

1
background-image: radial-gradient([shape] [size] (at) [position], start-color, ..., last-color);

这里 shape、size、position 都有一些可选值：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
enum shape {
  ellipse（默认）：指定椭圆形的径向渐变
  circle：指定圆形的径向渐变
}

enum size {
  farthest-corner（默认）：指定渐变的半径大小为 `圆心` 到 `离圆心最远的` 的 `角`
  closest-corner ： 指定渐变的半径大小为 `圆心` 到 `离圆心最近` 的 `角`
  farthest-side ：指定渐变的半径大小为 `圆心` 到 `离圆心最远` 的 `边`
  closest-side ：指定渐变的半径大小 `圆心` 到 `离圆心最近` 的 `边`
}

enum position {
  center（默认）：设置 `中间` 为渐变圆心的纵坐标值
  top：设置 `顶部` 为渐变圆心的纵坐标值
  bottom：设置 `底部` 为径向渐变圆心的纵坐标值
  ... // 与  background-position、transform-origin 的参数保持一致
}

基本用法

1
background: radial-gradient(white, #9198e5);

radial-gradient-demo-1

径向渐变的应用场景还是比较少的，基本只能做做背景图。张鑫旭大佬写过一个用径向渐变实现波浪线动画的效果，有兴趣可以看看。

3. Repeating gradient

重复渐变，包含重复线性（repeating-linear-gradient）与重复径向（repeating-radial-gradient）两种方式：

repeating-linear-gradient

完整语法：

1
background: repeating-linear-gradient([angle] | to [side-or-corner], color-stop1, color-stop2, ...);

用法和线性渐变差不多，一般需要指定 color-stop 中的 stop 参数，不然不会出现重复效果（或重复效果不符合预期）。

e.g.

不指定任何一个 stop 参数：

1
background: repeating-linear-gradient(#e66465, #2d2d2d);

repeating-linear-gradient-demo-1

即使用了 repeating-linear-gradient，也没有出现重复。

指定 stop 参数后：

1
background: repeating-linear-gradient(#e66465, #2d2d2d 50%);

repeating-linear-gradient-demo-2

这样就符合预期啦。

可以用 repeating-linear-gradient() 来画斑马线、发廊💈动画之类的。

repeating-radial-gradient

完整语法：

1
background-image: repeating-radial-gradient([shape] [size] (at) [position], start-color, ..., last-color);

repeating-radial-gradient

1
background: repeating-radial-gradient(#f69d3c, #3f87a6 50px);

参数和径向渐变一致，可以用来画水的波纹、唱片机之类的，应用场景也比较局限。

4. Conic gradient

锥形渐变，除了线性渐变外个人最喜欢的一种渐变样式！

conic-gradient

1
2
/* 渐变方向为顺时针旋转 */
background: conic-gradient(#f69d3c, #3f87a6);

先来看看它的用法：

1
conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )

它包含三个参数：

  1. angle：起始角度
  2. position：中心位置
  3. angular-color-stop-list：色值断点（list）

场景 Demo

既然叫锥形，那先来画个“锥”

conic-gradient-demo-1

1
background: conic-gradient(#eee .1turn, black, #eee 326deg);

调色板

把七色都填一遍，就形成了一个调色板。

conic-gradient-demo-2

1
2
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
border-radius: 50%

快速制作饼图

1
2
3
background: conic-gradient(#845460 0 40%, #ead3cb 0 70%, #bdc7c9 0);
/* or */
background: conic-gradient(#845460 0%, #845460 40%, #ead3cb 0 40%, #ead3cb 0 70%, #bdc7c9 70%, #bdc7c9 100%);

上面两种写法是等价的效果，第一种其实是覆盖式的写法，先写的会盖在后写的上面；第二种则是直接设定各个色块的区间。

conic-gradient-demo-3

棋盘

平铺效果的核心在于重复渲染多个「样式单位（元素）」，最典型的例子就是棋盘，以前写棋盘可能要用很多个 div 来实现，而利用 conic-gradient + background 可以很轻松地实现这个效果。

首先先用 conic-gradient 画一个单位元素：

conic-gradient-demo-4

1
background: conic-gradient(black 25%, white 0 50%, black 0 75%, white 0);

再利用 background-size 和 background-repeat 来渲染一打格子：

1
2
backgroud-repeat: repeat;
background-size: 10vmin 10vmin;

conic-gradient-demo-5

Repeat it?

上面所说的 线性渐变 和 径向渐变 都有 repeating 方法，那 锥形渐变 自然也要有啦，而且能玩出更多的花样来～

重复锥形渐变函数：repeating-conic-gradient()，传参形式与锥形渐变函数一致。

像 Loading 效果、五角星、雷达图等等都不在话下，还能搭配 Animation 做出很棒的特效，比如这样：

repeat-conic-gradient

浏览器支持性

caniuse conic-gradient

截止目前（2021-4-17），IE 完全不支持（Whatever），其他浏览器支持情况较好，整体在 91%。Polyfill。

Author: Cyris

Permalink: https://sound.cyris.moe/posts/css-gradient-art/

文章默认使用 CC BY-NC-SA 4.0 协议进行许可，使用时请注意遵守协议。

updated at 2024-03-21

CSS渐变# CSS
Previous Post
在 Hexo 中引入 Codepen
Next Post
神奇的 Document designMode

Comments

Unable to load Disqus, please make sure your network can access.