颜色

很多不熟悉前端的程序员写页面喜欢用Bootstrap这个组件库，其中就有这么几种颜色：

• default：默认之白
• primary：基础之蓝
• success：成功之绿
• warning：警告之黄
• danger：危险之红

当然这5种颜色都是Twitter的设计师精心调教过的，但各种「XX管理系统」都是这么5种颜色，那就很让人反胃了。实际上，CSS的颜色功能非常强大，我们不仅可以写出炫酷的RGBA颜色设计，还可以做渐变等效果。

注：如果熟悉绘画，就知道显示器对设计中颜色的影响至关重要，本来是一深一浅两个颜色，拿到垃圾显示器下，可能根本看不出区别，视觉体验也就大打折扣了

指定颜色

CSS中指定颜色非常简单且常用，比如背景颜色，边框颜色，文字颜色，阴影颜色等等，这里就不多说了。

我们可以通过类似#000000的形式指定RGB颜色，也可以写为rgb(0, 0, 0)。

除了RGB，还可以指定Alpha值，实现透明的效果，例如#0000007F，或者rgba(0, 0, 0, 0.5)。如果涉及到透明度，我建议使用后者，因为前面写法的透明度设定范围是十六进制的0到FF，不符合一般人的思维，而rgba设定的透明度范围是0到1，使用起来比较简单。

Gradient 渐变

线性渐变

具体什么是线性渐变我就不描述了，大家都懂，这里给出一个例子。

.color-ring {
    width: 1000px;
    height: 100px;
    background-image: linear-gradient(to bottom, red, green, blue);
}

其中，to bottom指定的是渐变的方向，为从上到下，渐变的颜色可以指定多个。

辐射渐变

.color-ring {
    width: 1000px;
    height: 100px;
    background-image: radial-gradient(red, green, blue);
}