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;
    }