CSS文字颜色的详细阐述

一、颜色的基础知识

CSS中的颜色有许多种类，其中最基础的是RGB颜色。RGB颜色是根据红、绿、蓝三种颜色的亮度不同来混合得到的，并且可以通过十六进制、rgb()函数及rgba()函数来表示。

在实际应用中，我们可以通过多种方式选择具体的颜色。比如，我们可以在CSS中直接引用网页设计中所定义的专用颜色，或使用在线的颜色拾取器工具来选择我们需要的颜色。

同时，CSS3中还支持了HSL颜色和HSLA颜色，这两种颜色的特点是色相、饱和度和亮度可以分别进行调整，非常方便。

二、文本特殊效果颜色方案

在应用CSS时，我们也可以将文本的颜色应用于其他特殊效果方案中，以达到更加出彩的效果。下面是一些实例：

1、文本阴影

    .text-shadow {
        font-size: 36px;
        color: #fff;
        text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000,
                     1px 0px 0 #000, 1px 1px 0 #000, 0 1px 0 #000,
                     -1px 1px 0 #000, -1px 0px 0 #000;
    }

其中text-shadow属性可以让文本产生阴影效果，而在这里，我们将阴影的方向设为8个方向，并均加上黑色的背景，实现了生动但不过分的阴影效果。

2、文本轮廓

    .text-stroke {
        font-size: 36px;
        color: #fff;
        text-stroke: 1px #000;
        -webkit-text-stroke: 1px #000;
    }

text-stroke属性可以为文本设置一个轮廓，可以控制轮廓的宽度和颜色，并且还允许使用浏览器前缀。

3、文本渐变

    .text-gradient {
        font-size: 36px;
        background: -webkit-linear-gradient(#ee0979, #ff6a00, #f9c715);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

我们可以通过CSS中的background属性将文本颜色设置成渐变色，实现生动而又不失平衡的渐变效果。

三、常用的颜色搭配方案

在实际应用中，我们通常需要将多个颜色进行有机地结合，形成符合整体感觉的搭配方案。这里我们介绍几种常用的颜色搭配方案。

1、类似色系搭配

类似色系搭配是使用相邻颜色搭配，可以让整体设计感觉渐变。例如，黄色和绿色、红色和橙色等等。

2、互补色搭配

互补色搭配是通过把正好处于颜色圆中正对面的两种颜色进行组合，可以形成强烈的对比效果。例如，红色和绿色、紫色和黄色等等。

3、三色插补搭配

三色插补搭配是通过将三种颜色按照颜色圆上的规律进行搭配，可以形成绚丽多彩的效果。例如，红、绿、蓝三种色搭配。

四、精选代码示例

1、调整文本颜色的透明度及其浏览器的兼容性处理

    .color-opacity {
        color: rgba(0, 0, 0, 0.5);
        color: rgba(0, 0, 0, 0.5)\9;            /* IE8 */
        *color: rgba(0, 0, 0, 0.5);              /* IE7及以下 */
        color: transparent\0;                    /* IE8以下失效 */
        zoom: 1;
    }

2、使文本框内的颜色根据鼠标的位置发生变化

    .box {
        width: 100px;
        height: 100px;
        background-color: #ddd;
        position: relative;
    }
    .color-change {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: rgb(255, 0, 0);    /* 起始颜色 */
    }
    .box:hover .color-change {
        background-color: rgb(0, 0, 255);   /* 结束颜色 */
    }

3、实现文本颜色的闪烁效果

    .color-flash {
        color: #000;
        -webkit-animation: color_flash 1s infinite;
        animation: color_flash 1s infinite;
    }
    @-webkit-keyframes color_flash {          /* webkit浏览器前缀 */
        0% { color: #f00; }
        50% { color: #ff0; }
        100% { color: #f00; }
    }
    @keyframes color_flash {
        0% { color: #f00; }
        50% { color: #ff0; }
        100% { color: #f00; }
    }

4、使用CSS渐变实现文本颜色的渐变效果

    .text-gradient {
        font-size: 36px;
        background: -webkit-linear-gradient(#ee0979, #ff6a00, #f9c715);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

5、使用CSS阴影实现文本立体效果

    .text-3D {
        color: #fff;
        text-shadow: 1px 1px #999, 2px 2px #888, 3px 3px #777;
    }