CSS顏色體系的示例分析-創(chuàng)新互聯(lián)

這篇文章主要介紹了CSS顏色體系的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

10年積累的成都做網(wǎng)站、網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有烏什免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

先用一張圖直觀的感受一下與 CSS 顏色相關(guān)大概覆蓋了哪些內(nèi)容。

接下來(lái)的行文內(nèi)容大概會(huì)按照這個(gè)順序進(jìn)行，內(nèi)容十分基礎(chǔ)，可選擇性跳到相應(yīng)內(nèi)容處閱讀。

色彩關(guān)鍵字

嗯，色彩關(guān)鍵字很好理解。它表示一個(gè)具體的顏色值，且它不區(qū)分大小寫。譬如這樣color:red的 red 即是一個(gè)色彩關(guān)鍵字。

在 CSS3 之前，也就是CSS 標(biāo)準(zhǔn) 2，一共包含了 17 個(gè)基本顏色，分別是：

而到了 CSS3，色彩關(guān)鍵字得到了極大的擴(kuò)充，達(dá)到了 147 個(gè)。下面僅僅是列出了一部分:

值得注意的是，未知的關(guān)鍵字會(huì)讓 CSS 屬性無(wú)效。

這里的這個(gè)測(cè)試 test3 是為了說(shuō)明，當(dāng)傳入的色彩關(guān)鍵字錯(cuò)誤，CSS 屬性將無(wú)效而不是使用當(dāng)前的currentColor替代。currentColor會(huì)在下文說(shuō)明。

哪些屬性可以設(shè)置顏色

所有可以用到顏色值的地方，都可以用色彩關(guān)鍵字替代，那么在 CSS 中，什么地方可以用到顏色值呢？

文本的顏色color:red

元素的背景色background-color:red（包含各類漸變）

元素的邊框border-color:red

元素的盒陰影或文字陰影box-shadow:0 0 0 1px red|text-shadow:5px 5px 5px red

運(yùn)用在一些濾鏡當(dāng)中filter: drop-shadow(16px 16px 20px red)

<hr />水平線的顏色

一些無(wú)法直接設(shè)置，但是可以被得到或者繼承當(dāng)前元素 currentColor 的屬性：

<img>的 alt 文本。也就是，當(dāng)無(wú)法顯示圖像時(shí)，代替圖像出現(xiàn)的文本，會(huì)繼承這個(gè)顏色值。

ul 列表項(xiàng)的小點(diǎn)

一些比較常見的就不舉例了，說(shuō)一下<hr/>、<img>的 alt 文本和 ul 列表項(xiàng)的小點(diǎn)。

經(jīng)過(guò)測(cè)試，<hr/>的顏色值，可以通過(guò)設(shè)置它的 border 的顏色值來(lái)表示。

<img>的 alt 文本和 ul 列表項(xiàng)的小點(diǎn)則會(huì)繼承當(dāng)前元素 currentColor 的屬性。

對(duì)于表單控件<input type="radio"><input type="checkbox">，暫時(shí)沒(méi)有找到很好的直接改變顏色的方法，如果有知道希望不吝賜教。

transparent

transparent 的字面意思就是透明。它用來(lái)表示一個(gè)完全透明的顏色，即該顏色看上去將是背景色。

也可以理解為它是rgba(0,0,0,0)的簡(jiǎn)寫。

值得注意的是:

在 CSS3 之前，transparent 關(guān)鍵字不是一個(gè)真實(shí)的顏色，只能用于background-color和border-color中，表示一個(gè)透明的顏色。而在支持 CSS3 的瀏覽器中，它被重新定義為一個(gè)真實(shí)的顏色，transparent 可以用于任何需要color值的地方，像 color 屬性。

那么這個(gè)透明值有什么用呢？簡(jiǎn)單列舉一些例子：

transparent 用于 border，繪制三角形

這算是 transparent 最常見的一個(gè)用法，用于繪制三角形。

結(jié)合上圖圖1、圖2，可以看到利用一個(gè)高寬為 0 的 div，設(shè)置它的 border ，當(dāng)任意三邊的 border 顏色為 transparent 時(shí)，則可以得到任意朝向的一個(gè)三角形。

像上文說(shuō)的，由于 transparent 在低版本瀏覽器中（IE78）可以使用在 border、background 中，所以此方法兼容性很好，可以利用于很多場(chǎng)景。

transparent 用于 border，實(shí)現(xiàn)增大點(diǎn)擊熱區(qū)

按鈕是我們網(wǎng)頁(yè)設(shè)計(jì)中十分重要的一環(huán)，而按鈕的設(shè)計(jì)也與用戶體驗(yàn)息息相關(guān)。讓用戶更容易的點(diǎn)擊到按鈕無(wú)疑能很好的增加用戶體驗(yàn)，尤其是在移動(dòng)端，按鈕通常都很小，但是有時(shí)由于設(shè)計(jì)稿限制，我們不能直接去改變按鈕元素的高寬。那么這個(gè)時(shí)候有什么辦法在不改變按鈕原本大小的情況下去增加他的點(diǎn)擊熱區(qū)呢？

這里，借助透明的 border 可以輕松幫我們實(shí)現(xiàn)（我之前一篇文章寫到過(guò)，利用偽元素也可以實(shí)現(xiàn)），利用一層透明的border:20px solid transparent我們可以這樣寫：

試著將光標(biāo)靠近Btn，會(huì)發(fā)現(xiàn)在還未到達(dá)有顏色區(qū)域之前，就已經(jīng)觸發(fā)了鼠標(biāo)的交互響應(yīng)事件hover，利用這一點(diǎn)在移動(dòng)端可以很好的擴(kuò)大按鈕的可點(diǎn)擊區(qū)域又不至于改變按鈕本身的形狀。像這樣：

嗯哼，這里我們將border用于了擴(kuò)大鼠標(biāo)點(diǎn)擊區(qū)域，然而真實(shí)情況是有的時(shí)候我們的按鈕必須要用到 border，而 border 又只能設(shè)置一重（無(wú)法像box-shadow和漸變一樣設(shè)置多重 border），這個(gè)時(shí)候如果還需要運(yùn)用這種方法，可以使用內(nèi)陰影box-shadow模擬一層 border，像這樣：

transparent 用于 background，繪制背景圖

transparent 用于 background，通?？梢灾圃斐龈鞣N各樣的背景圖像。這里舉個(gè)簡(jiǎn)單的例子，利用透明漸變，實(shí)現(xiàn)一個(gè)切角圖形：

通過(guò)線性漸變 linear-gradient實(shí)現(xiàn)從透明色到實(shí)色的變化，將四個(gè)四分之一大小（background-size: 50% 50%）的圖形組合在一起，就生成了一個(gè)切角圖形。

利用 transparent 與漸變的配合還能生成各種各樣美妙的圖形，可以戳下面看看：

transparent 用于文本 color

配合 box-shadow ，在文本上運(yùn)用 transparent，可以營(yíng)造出一種文字發(fā)光的效果，鼠標(biāo) hover 下面的文字試試：

transparent 其實(shí)還有很多作用，暫且說(shuō)這么多，歡迎繼續(xù)討論。

currentColor

很多人都不知道還有currentColor這個(gè)東東。和 transparent 一樣，它也是一個(gè)關(guān)鍵字，顧名思義，它表示當(dāng)前顏色。它來(lái)自自屬性或者繼承于它的父屬性。

可以簡(jiǎn)單的理解為當(dāng)前 CSS 標(biāo)簽所繼承或設(shè)定的文本顏色，即 color 的值。

那它具體可以怎么用呢，根據(jù)我們書寫 CSS 的原則 DRY(Don’t Repeat Yourself)，使用這個(gè)關(guān)鍵字可以很好的減少改動(dòng) CSS 時(shí)的工作量?？磦€(gè)例子：

上面的例子，我只在 color 里寫了顏色，在 border 和 box-shadow 中使用了 currentColor 屬性?？梢钥吹?，這兩個(gè)屬性的顏色值都被設(shè)置為了 color 中設(shè)置的值，當(dāng)我們需要用到這種同色表現(xiàn)的時(shí)候，使用 currentColor 更佳，方便日后改動(dòng)。

但是，currentColor 是 CSS3 新增的，在老版本瀏覽器下是無(wú)法識(shí)別的。那么是否在老版本瀏覽器下就無(wú)法使用了呢，也不盡然，還是有一些特例的，看看下面這個(gè)：

可以看到，上面我只在 color 里寫了顏色，border 的值為1px solid，box-shadow 也是，并沒(méi)有帶上顏色值，但是依然表現(xiàn)為了 currentColor 的值。這是因?yàn)檫吙蝾伾完幱邦伾J(rèn)就是當(dāng)前盒子的文本顏色，其中 border 兼容性很好，可以支持到 IE6 。

當(dāng)然 border 和 box-shadow 是特例，不是所有需要填寫顏色值的屬性不填寫都會(huì)默認(rèn)繼承文本的值的。

那么元素中將會(huì)得到或者繼承元素 color 值有哪些呢：元素的文本內(nèi)容文本的輪廓元素的邊框元素的盒陰影filter:drop-shadow()<img>的 alt 文本。也就是，當(dāng)無(wú)法顯示圖像時(shí)，代替圖像出現(xiàn)的文本，會(huì)繼承這個(gè)顏色值。列表項(xiàng)的小黑點(diǎn)和邊框一些瀏覽器（比如Chrome）水平線（<hr>）的邊框顏色。（沒(méi)有邊框的話，顏色就不會(huì)受影響）。

currentColor 的兼容性

rgb() 與 rgba()

顏色表示模型的話，簡(jiǎn)單了解一下。

rgb() 表示顏色的紅-綠-藍(lán)（red-green-blue (RGB)）模式，rgba() 多一個(gè) a ，表示其透明度，取值為 0-1。

rgb 的顏色模型通常由一個(gè)立方體表示：

我們知道，通常我們使用的時(shí)候，不使用縮寫的話，使用十六進(jìn)制符號(hào) #RRGGBB,

在 #RRGGBB 中，RR 表示 紅色的深淺，GG 表示綠色的深淺，BB 表示藍(lán)色的深淺。取值都是從 00 - FF，值越大表示該顏色越深。

如果采用 rgb(RR,GG,BB) 的寫法，RR 取值 0~255 或者百分比，255 相當(dāng)于 100%，和十六進(jìn)制符號(hào)里的 F 或 FF 。

了解了 rgb() 的含義的話，記住常用的顏色值其實(shí)是很容易的，像上面說(shuō)的 RR 表示紅色的深淺，那么理解記憶#FF0000表示為紅色就 so easy 了，同理可以得到#00FF00表示綠色，#0000FF表示藍(lán)色。

再記住顏色的疊加原理：

我們就可以輕松的記住，#FF00FF紅藍(lán)疊加表示紫色，#FFFF00紅綠疊加表示黃色，#00FFFF藍(lán)綠疊加表示青色。

hsl() 與 hsla()

除了 rgb 表示法，顏色也可以使用 hsl() 表示。hsl()被定義為色相-飽和度-明度（Hue-saturation-lightness），hsla() 多一個(gè) a ，表示其透明度，取值為 0-1。。

hsl 相比 rgb 的優(yōu)點(diǎn)是更加直觀：你可以估算你想要的顏色，然后微調(diào)。它也更易于創(chuàng)建相稱的顏色集合。

hsl 的顏色模型通常由一個(gè)圓柱體表示：

色相（H）是色彩的基本屬性，就是平常所說(shuō)的顏色名稱，如紅色、黃色等。飽和度（S）是指色彩的純度，越高色彩越純，低則逐漸變灰，取0-100%的數(shù)值。明度（V），亮度（L），取0-100%。

其實(shí)對(duì)于我們前端而言，使用 hsl 表示顏色會(huì)更方便。

以一個(gè)按鈕為例，我們用 hsl 顏色表示法表示按鈕 normal 狀態(tài)下的背景色值，我們希望 hover 的時(shí)候，背景色暗一點(diǎn)，而 active 的時(shí)候背景色亮一點(diǎn)。如果采用 rgb 表示法，我們需要 3 個(gè)完全不一樣的顏色，而采用 hsl 表示法，我們只需要在 hover 和 active 的時(shí)候去改的 顏色值的 l （即Light，亮度）值即可。運(yùn)用上面出現(xiàn)過(guò)的一個(gè)例子再看看：

這里background:hsl(200, 60%, 60%)在 hover 和 active 的時(shí)候，我只改動(dòng)了 hsl 顏色值的第三個(gè)值達(dá)到了我們希望的效果。

rgb 到 hsl 的轉(zhuǎn)換

這里有個(gè)小 tips 可能有些人不知道，在開發(fā)階段我們只有一個(gè) rgb 值，但是希望轉(zhuǎn)換成 hsl 值，使用 chrome 開發(fā)者工具可以很便捷的做到，如下圖，我們只需要選中我們想轉(zhuǎn)換的顏色值，按住鍵盤左shift，點(diǎn)擊這個(gè)顏色表示框，即可進(jìn)行轉(zhuǎn)換：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS顏色體系的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

網(wǎng)頁(yè)名稱：CSS顏色體系的示例分析-創(chuàng)新互聯(lián)
文章URL：http://bm7419.com/article4/dgopoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、電子商務(wù)、定制開發(fā)、虛擬主機(jī)、軟件開發(fā)、網(wǎng)站營(yíng)銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)