个人技术博客之CSS渐变还能这么玩！

技术概述

CSS渐变。在背景上使用渐变色是一种常见的设计，能给页面增加一种纵深感，但它的作用不止于此，使用CSS渐变还能实现很多意想不到的效果，它可以被当成图案来使用，实现我们需要的图形。虽然语法简单就一行代码，但要想实现真正的效果还需要耐心琢磨。

技术详述

CSS渐变分为线性渐变、放射渐变和重复渐变。

线性渐变

1. 基本语法

//对应效果图1
background: linear-gradient(45deg,pink 0,#ffff7f 100%);

第一个参数指定对角线性渐变的角度，线性渐变默认的方向是自上而下。其中0%和100%分别表示第一个和最后一个色标的位置，当然也可以简写为一下形式，默认两个颜色均分。

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

同理，在后面新增色标：

//对应效果图2
background-image:linear-gradient(45deg,#ffff7f,pink,#fff,#ffe1ab,#bddbff);

那么它们的位置分别为0%、25%、50%、75%和100%，默认都是均分。

除了百分比，还可以使用绝对值指定色标的位置，如下面这行代码，表示渐变从黄色开始，往下到150像素位置时过渡到红色。

//对应效果图3
background-image:linear-gradient(45deg,#ffff7f,pink 150px);

2. 简单示例

双色条纹效果：

background: linear-gradient(#ffff7f 40%,pink 40%);

为什么会出现这样的效果呢？渐变去哪了呢？CSS图像（第三版)中给出了解释：“如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域，过渡的起止色分别是第一个和最后一个指定值。从效果上看，颜色会在那个位置突然变化，而不是一个平滑的渐变过程。”

这行代码还可以简写为

background: linear-gradient(#ffff7f 40%,pink 0);

可以看到效果是一样的。

规范中也给出了这种写法的解释：“如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。”

双色重复条纹效果：这里利用background-size来调整渐变图像的尺寸，使其默认平铺。

background: linear-gradient(#ffff7f 40%,pink 0);
background-size: 100% 4rem;

同理，可以创建多色条纹：

background: linear-gradient(#ffe1ab 20%,#ffff7f 0,#ffff7f 50%,#bddbff 0,#bddbff 80%,pink 0);

和多色重复条纹：

background: linear-gradient(#ffe1ab 20%,#fff82b 0,#fff82b 50%,#bddbff 0,#bddbff 80%,pink 0);
background-size: 100% 100px;

以上都是基于水平条纹，垂直条纹也是同理，只需在开头加上一个额外的参数指定渐变的方向即可，垂直条纹代码如下：

background: linear-gradient(to right,#ffe1ab 20%,#ffff7f 0,#ffff7f 50%,#bddbff 0,#bddbff 80%,pink 0);
background-size: 100px 100%;

当然，还可以实现斜向条纹：

background: linear-gradient(45deg,pink 25%,#ffff7f 0,#ffff7f 50%,pink 0,pink 75%,#ffff7f 0);
background-size: 5rem 5rem;

对应的效果图如下：

放射渐变

1. 基本语法

//对应效果图1
background: radial-gradient(#ffff7f,pink);

同理，可以声明多个色标

//对应效果图2
background: radial-gradient(#ffff7f,pink,#fff,#fff);

重复渐变

1. 基本语法

重复的线性渐变：

//对应效果图1
background: repeating-linear-gradient(#fff,pink 50px);

重复的放射渐变：

//对应效果图2
background: repeating-radial-gradient(#fff,pink 50px);

2. 简单示例

使用重复性渐变实现斜向条纹的效果：

background:repeating-linear-gradient(35deg,#fff, #fff 50px,pink 0,pink 100px);

实现同色系条纹的效果：只需将主色指定为背景色，不再为每种条纹单独指定颜色，再将半透明的百色市条纹叠加再背景色之上来得到浅色系的条纹

background: pink;
background-image: repeating-linear-gradient(30deg,
			hsla(0,0%,100%,.3),hsla(0,0%,100%,.3) 3rem,
			transparent 0,transparent 6rem);

技术使用

《精通CSS：高级web标准解决方案》：渐变不一定需要很多像素来过渡，它也可以是突然的变化，从而形成锐利的线条或圆环。再搭配可以相互叠加的多重背景，就可以通过声明语法创造出简单的背景图案，甚至都无须打开图形处理软件

难题：以上基础的知识点让我们知道CSS渐变可以创建各种的条纹图案按，但是条纹并不是我们要实现的唯一背景图案，它甚至只是几何图案中最简单的一种，我们还需要很多其它不同类型的图案，比如网格、波点、棋盘等。（出自《CSS揭秘》）

网格图案

之前我们只使用过一个渐变，但如果我们使用多个渐变会发生什么呢？

background-image: linear-gradient(90deg,rgba(250,0,0,.5) 50%, transparent 0),
			linear-gradient(rgba(250,0,0,.5) 50%,transparent 0);
background-size: 2.5rem 2.5rem;

这段代码将水平和垂直的条纹叠加了起来，最终得到了如图所示的桌布效果

《CSS揭秘》：在某些情况下，我们希望网格中每个格子的大小可以调整，而网格线的粗细同时保持固定。举例来说，类似图纸辅助线的网格就是这种情况。这是一个非常好的例子，展示了使用长度而不是百分比作为色标的场景：

background-image:linear-gradient(black 1px,transparent 0),
			linear-gradient(90deg,black 1px,transparent 0);
background-size: 1rem 1rem;

可以看出，第一条渐变代码生成的是一条条1px的水平线，第二条生成的则是垂直线，二者组合起来就是我们需要的辅助线网格。

同理，我们可以将两幅不同线宽和颜色的网格图案叠加起来，得到了一个更加逼真的网格：

background: #00007f;
background-image:linear-gradient(white 1px,transparent 0),
			linear-gradient(90deg,white 1px,transparent 0),
			linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),
			linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0);
background-size: 2rem 2rem,2rem 2rem,1rem 1rem,1rem 1rem;

波点图案

圆点阵列也是很常见的一种图案，这里需要使用到径向渐变即放射渐变：

background-image:radial-gradient(pink 30%,transparent 0);
background-size: 5rem 5rem;

利用上面的圆点阵列，我们可以生成两个圆点阵列图案，并将它们的背景定位错开，就可以得到我们需要的波点图案了：

background-image: radial-gradient(pink 30%,transparent 0),
			radial-gradient(pink 30%,transparent 0);
background-size: 5rem 5rem;
background-position: 0 0, 2.5rem 2.5rem;

棋盘图案

棋盘图案在很多场景下都会用到。比如说，相对于单调的纯色背景来说，具有细微对比度的棋盘图案可能就是一个有趣的替代品。在各种应用程序的界面中，灰色的棋盘图案已经是用于表示透明度的事实标准。

这里我们使用两个直角三角形来拼合出我们想要的方块，以下是生成三角形的代码：

background-image:linear-gradient(45deg,#bbb 25%,transparent 0);
background-size: 2.5rem 2.5rem;

这是其中一个三角形的生成代码，要实现棋盘的效果，我们一共需要四个直角三角形。另外三个三角形只需修改渐变角度和颜色，还有背景位置。以下是实现棋盘效果的完整代码：

background-image:linear-gradient(45deg,#bbb 25%,transparent 0),
			linear-gradient(45deg,transparent 75%,#bbb 0),
			linear-gradient(45deg,#bbb 25%,transparent 0),
			linear-gradient(45deg,transparent 75%,#bbb 0);
background-size: 2.5rem 2.5rem;
background-position: 0 0,1.25rem 1.25rem,1.25rem 1.25rem,2.5rem 2.5rem;

这段代码用到了四个渐变，我们还可以将处在贴片顶角的三角形两两组合起来，即三角形1和三角形4合并为一层渐变，三角形2和三角形3合并为另一层渐变，优化后的完整代码如下：

background-image: linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0),
			linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0);
background-position: 0 0,1.25rem 1.25rem;
background-size: 2.5rem 2.5rem;

切角效果

难题：把角切掉不仅是为了省钱，它还是一种非常流行的设计风格，不论是在印刷媒介还是在网页设计中都是如此。它最常见的形态是把元素的一个或多个角切成45°的缺口（也称作斜面切角）。——《CSS揭秘》

经过上面一系列的渐变示例，这里我们只需要一个线性渐变就可以达到效果，这个渐变将一个透明色放在切角处，然后在相同位置设置另一个色标，并将它的颜色设置为主色，实现一个切角的代码如下：

background: linear-gradient(-45deg,transparent 1rem,pink 0);

上述只实现了一个切角的效果，如果要实现两个切角的效果，不仅要再添一个渐变，还需要用到background-size使每层渐变分别占据整个元素一半的面积，并且要关掉background-repeat，使每层渐变只平铺一次：

background: linear-gradient(-45deg,transparent 1rem,#bbb 0) right,
		linear-gradient(45deg,transparent 1rem,pink 0) left;
background-size: 51% 100%;
background-repeat: no-repeat;

三个切角、四个切角的效果也是同理，需要用到四层渐变：

background: linear-gradient(135deg,transparent 1rem,pink 0) top left,
		inear-gradient(-135deg,transparent 1rem,pink 0) top right,
		linear-gradient(-45deg,transparent 1rem,pink 0) bottom right,
		linear-gradient(45deg,transparent 1rem,pink 0) bottom left;
background-size: 51% 51%;
background-repeat: no-repeat;

折角效果

难题：把元素的一个角（通常是右上角或左上角）处理为类似折角的形状，再配上或多或少的拟物样式，这种效果已经成为一种非常流行的装饰手法。 ——《CSS揭秘》

在上面我们已经实现了45°的切角，这只是实现折角的第一步，接下来需要增加一个暗色的三角形来实现翻转的效果。实现方法是增加另一层渐变来生成这个三角形并将其定位在右上角，同样可以通过background-size来控制折角的大小：

background: linear-gradient(to left bottom,transparent 50%,rgba(0,0,0,.4) 0) no-repeat 100% 0/ 2em 2em;

真正的45°折角效果的实现代码如下：

background: linear-gradient(to left bottom,transparent 50%, rgba(255, 255, 255, 0.4) 0) no-repeat 100% 0/ 2em 2em,
		linear-gradient(-135deg,transparent 1.5em,pink 0);

但真实情况下的折角往往不是精确的45°，如果要实现30°折角，我们还需要利用三角函数来调整相应的尺寸：

background: linear-gradient(to left bottom,transparent 50%,rgba(255, 255, 255, 0.4) 0) no-repeat 100% 0/ 3em 1.73em,
		linear-gradient(-150deg,transparent 1.5em,pink 0);

但我们发现真实的情况并不会折处这样的角度，我们还需要将右上方的三角形进行微微旋转，由于无法旋转背景，这里需要用到伪元素，用伪元素来生成右上方的直角三角形，并将它进行定位和旋转。
首先我们要先定义这个伪元素的宽高，由于是直角三角形，所以这个长方形的宽高比为根号三比1，可以依据这个比例设置伪元素的宽高如下，并使用绝对定位将伪元素定位在纸张的右上方。其次使用transform对元素进行旋转操作。最后给元素添加真正的渐变、圆角以及投影的效果使其看起来更加逼真：

//设置宽高
width: 1.73em;
height: 3em;
//设置定位
position: absolute;
top: 0;right: 0;
//旋转
transform: translateY(-1.3em) rotate(-30deg);
transform-origin: bottom right;
//渐变
background: linear-gradient(to left bottom,transparent 50%,rgba(0,0,0,.2) 0,rgba(0,0,0,.4)) no-repeat 100% 0;	
//圆角
border-bottom-left-radius: inherit;
//投影
box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);

对于原始元素，设置背景为普通切角图案，并增加圆角效果，设置定位为相对定位，效果即出炉：

background: linear-gradient(-150deg,transparent 1.5em,pink 0);
border-radius: .5em
position: relative;

技术总结

CSS里的渐变颠覆了平时PS中使用渐变的效果，它不仅仅是制造颜色这样简单，对图案图形的绘制也是很有帮助的，利用好CSS渐变的特性，对于HTML5界面的绘制是有很大的帮助的，不需要频繁地进行PS绘图，导入图片资源等操作。最神奇的就是，使用了渐变的语法，却没有任何渐变的效果，而是一块块实色、一块块图案的拼接。

参考文献

参考书籍：《CSS揭秘》《精通CSS：高级Web标准解决方案》