花里胡哨的背景渐变-51CTO.COM

背景

设计师的原稿是这样的渐变：

导出的视觉稿是这样的：（导出工具没有识别到渐变）

于是决定去找设计师沟通这个渐变”长什么样“。当然，设计师并不会像写 CSS 一样给你描述渐变，所以作为需要写出这个渐变的 CSS 的前端，就需要问清楚渐变的一些属性值，比如渐变方式、渐变点和颜色等，这时就需要重新认识一下 background-image 这个属性了...

渐变背景

CSS 背景渐变使用 background-image 属性来实现。实现渐变的常见方式有线性渐变和径向渐变两种。例子中属于椭圆的径向渐变

径向渐变

也就是 CSS 函数 radial-gradient()，MDN 中的 radial-gradient 的形式语法如下：

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

ending-shape：可选，指定径向渐变的结束形状。取值可以是 ellipse 或 circle。
size：可选，指定径向渐变的大小。可以是具体的大小值，或者关键字 closest-side、 farthest-side、 closest-corner、 farthest-corner，表示径向渐变从形状的边缘或角落开始。
at position：可选，指定径向渐变的起始位置，可以是具体的像素值或比例值，或者关键字 top、 bottom、 left、 right，或者它们的组合形如 top left。
color-stop-list：色标组，表示径向渐变的颜色和渐变位置。可以是一个或多个颜色值，以及它们的位置百分比，形如 color stop.

其中中括号表示可选，|| 表示或者，也就是说，<radial-gradient()> 函数可以接收的参数不是必须包含 ending-shape 和 size 两个属性，但至少需要指定 color-stop-list。在 color-stop-list

在宽高都为 300px 的 div 中

指定色标组：

selector {
  // 以红色（#ff0000）为起始颜色，绿色（#00ff00）为结束颜色的默认大小径向渐变
  // 默认会以 selector 的宽高把渐变的撑满
  background-image: radial-gradient(#ff0000, #00ff00);
}

2. 指定渐变结束形状 + 色标组：

selector {
  // 以红色（#ff0000）为起始颜色，绿色（#00ff00）为结束颜色的圆形（circle）形状径向渐变
  // circle 会以 selector 的短边为渐变直径
  background-image: radial-gradient(circle, #ff0000, #00ff00);
}
selector {
  // 以红色（#ff0000）为起始颜色，绿色（#00ff00）为结束颜色的圆形（ellipse）形状径向渐变
  // ellipse 也会以 selector 的宽高把渐变的撑满
  background-image: radial-gradient(circle, #ff0000, #00ff00);
}

size + 色标组：

selector {
  // 以红色（#ff0000）为起始颜色，绿色（#00ff00）为结束颜色的横轴 200px 竖轴 100px 的椭圆形状径向渐变
  background-image: radial-gradient(200px 100px, #ff0000, #00ff00);
}

size + 位置 + 色标组：

selector {
  // 以红色（#ff0000）为起始颜色，绿色（#00ff00）为结束颜色的横轴 200px 竖轴 100px 圆心在左上角的椭圆形状径向渐变
  background-image: radial-gradient(200px 100px at top left, #ff0000, #00ff00);
}

看完上述的几种操作，不难看出，我们只需要问一下设计师渐变椭圆的长轴短轴、起始位置、开始结束颜色就可以了。

实际生产代码中已经与设计师沟通去掉了旋转角度，以左上角为圆心，100rpx 为纵轴，父盒子宽度为横轴的径向渐变。

最终代码和效果图：

.recently-live {
  background-image: radial-gradient(100% 100rpx ellipse at 0 0, #dbeaff, transparent);
}

看到这里就会有同学就要问了（无中生有），不能让设计师切个图吗？

当然可以，不仅省时而且还原效果好。

但是～图片加载需要时间，就会出现父级盒子闪白的情况，比起处理这个问题我选择写CSS

解决了视觉稿的问题，我们再来说说另一个常用的渐变：线性渐变

线性渐变

他的形式语法如下：

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

第一个参数代表方向，可以使用关键字 top left 等，举几个例子：

使用关键字：to top （从底部到顶部）、to bottom （从顶部到底部）、to left （从右侧到左侧）、to right （从左侧到右侧）等。

background-image: linear-gradient(to top, red, blue);

使用角度值：表示渐变的角度，0 度表示从上到下，逆时针旋转。

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

自定义起始和结束的坐标点：

background0-image: linear-gradient(0% 0%, 100% 100%, red, blue);
background0-image: linear-gradient(0 0, 100px 100px, red, blue);

第二个参数代表定义渐变的起始点和终止点以及对应的颜色。

简单使用

background-image: linear-gradient(to top, red, blue);
background-image: linear-gradient(#000000, #ffffff);

带位置的颜色位置值是可选的，如果未指定位置值，浏览器将自动平均分配颜色停止点。

background-image: linear-gradient(red 0%, blue 20%, green 100%);
background-image: linear-gradient(red 0, blue 300px, green 500px);

对于上述常见的线性渐变写法，我更喜欢第二种颜色位置一起的写法，渐变一目了然。

我们如果在工作中遇到导出的视觉稿无法对应设计师原稿时，不妨直接从设计师那得到渐变方向、每个颜色对的起点终点和色值

比如从左到右，从最左边到中点为红到蓝，再到最右边为绿，得出代码：

background-image: linear-gradient(to right, red 0, blue 50%, green 100%);

除此之外，让我们再来看看不常用但很有意思的重复渐变和圆锥渐变

圆锥渐变

圆锥渐变简单理解就是以一个圆心为旋转点的顺时针渐变。用它可以实现一些非常有意思的效果

他的语法跟径向渐变类似，直接举几个例子好了：

烟囱浓烟污染天空

background: conic-gradient(from 0.5turn at 10% 50%, crimson, cyan);

这个表示旋转 0.5 圈后的，从绯红到青色的一个渐变，模拟了一个烟囱浓烟污染天空的效果。

高空跳板

background-image: conic-gradient(from 0.25turn at 80% 30%, orange, 10deg, cadetblue, 350deg, #fff);

from 关键字后面跟上旋转角度 0.25turn 表示转四分之一，也就是 360 / 4 = 90deg ，你也可以写 90deg、 1.57rad，位置可选，at 关键字后跟上旋转圆心坐标，后面的颜色表示从 orange 渐变到 cadetblue，然后再渐变到白色。渐变的角度从起始位置开始，先是 10 度切换到蓝色，然后再以 350 度的角度切换到白色。

怎么样，右上角那一缕阳光照射着的三寸小木板，是不是很有意思。

重复渐变

重复线性渐变 repeating-linear-gradient 和重复径向渐变 repeating-radial-gradient 以及重复圆锥渐变 repeating-conic-gradient

他们的用法跟普通的线性渐变和径向渐变一样，唯一的不同时，如果渐变无法撑满就会重复到撑满为止

来看一下对比：

0 到 10% 的红色到蓝色的向下渐变，左边是普通线性渐变，右边是重复渐变渐变

background-image: repeating-linear-gradient(blue 0, black 10%);

我们不难看出，普通线性渐变无法撑满时，会以最后一个渐变色一直延伸到末端，而重复线性渐变会重复到末端

看到右边这张图让我想起了我们的刻板印象：程序员格子衫...

0 到 30deg 的普通圆锥渐变和重复圆锥渐变的对比

background-image: repeating-conic-gradient(red, yellow 30deg);

右边这个重复圆锥渐变如果旋转起来是不是可以模仿一个胜利的效果呢～

0 到 8% 的蓝色到黑色的重复径向渐变重复径向渐变也是一样的，当渐变的横纵轴小于父盒子的宽高时，就会重复

background-image: repeating-radial-gradient(blue 0, black 8%);

看到这里，我想到一个好玩的：我们动态改变结束色值的位置，会是什么样的效果呢？

比如把 black 8% 在 1s 里变为 20% ，再在 1s 里回到 8%...效果比较“眩晕”，就不放图给大家了，大家可以自行尝试下～

总结

本文仅针对一些比较常用的背景渐变和常见写法进行了梳理，不涉及到美观和设计理念，对于喜欢 CSS 的同学，可以尝试用渐变写出更多好看有意思的效果，欢迎一起讨论一下。