色值的更多寫法 16進制 rgb hsl #javascript

站開發入門指南：多種色值寫法。

接下來給大家介紹幾個常用的設置顏色色值的方式。顏色色值的設置在樣式設置中是非常常用的，包括背景顏色、漸變顏色、邊框顏色、字體顏色等等，很多的地方都可能需要用到顏色色值的設置。

·之前已經講過一種最基礎的方式，就是這種關鍵字的方式，也就是用英文單詞這樣的方式。之前講過有很多顏色的名字都是可以用的，像之前一直用的設置顏色的方法也都是這種色值的方式，這種關鍵字的方式。

·另外一種是非常常用的，是十六進制。十六進制概念如果不理解其實也沒有關系，可以簡單的把它理解為有十六個數，0123456789，然后是aobcdef，從0到f是從小到大的邏輯。

它的寫法大概是這樣的樣子，16進制的顏色的寫法大概是這樣的樣子。這個樣子的特點就是一開頭這里是有個井號，然后是兩兩一組的，第一組就是表示紅色，第二組是表示綠色，第三組是表示藍色。

·ff就表示顏色，比如這里是紅色，它是最濃的，顏色強度是最大的。三種顏色就相當于也是三原色去拼，拼起來就混合成一種最終的顏色效果。

·00就表示顏色沒有綠色的色值，這里如果也是ff就表示藍色也是最濃的。所以可以嘗試的去把它設置一下，會發現它就變成了這樣的顏色。

·像這種寫法其實如果兩兩的字符是一樣，其實可以簡寫成這樣的一種寫法。這兩者其實相當于是一樣的了。

有幾種非常常用的顏色的色值，其實一看就應該知道的，給大家羅列一下。比如這種3個f，也就是這種6個f，其實是一樣的，這個明顯就是一個白色了，3個0就是沒有，這個跟6個0是一樣的，就是純黑。

像這種直接寫6個的，就是紅色，正紅色，ff放中間其實就是綠色，這樣就是一個藍色，這個應該都很好理解，就是三原色的概念。如果不了解三原色的概念，可以自己去查資料了解一下，可以給它去設置一下，看一下是不是藍色，大家可以看到就是一個藍色，這是16進制的最基本的用法。

但是它其實還可以加兩位，加兩位之后，最后的兩位就是表示的是不透明度的概念。不透明度的概念其實這里也可以稱作是alpha，阿爾法其實就是可以表示是不透明度的概念。像這00就是最小，就是0的不透明度，就是最小的不透明度，就是完全透明。

也可以試一下，比如用這里給它加一個00，這就沒有了，ff其實不加不透明度的設定，其實它的不透明度就是1，就是完全的看得見，沒有任何的透明的狀態。

像這個顏色，這個16進制的色值，其實是不用去記的，因為很多設計軟件里面都非常方便的去給到顏色的16進制的色值。比如可以看到這樣的figma設計軟件，選擇填充顏色，會看到這里有很多的顏色的選項可以選，其中最好復制的就是HEX，HEX就是表示16進制，16進制顏色一復制，放到CSS代碼里面，就直接就可以用了。它就可以生效了，所以是不用去記，不用去算某個色值是多少。

·然后像其他的后面要介紹這種rgb、hsl這幾種，就是這里也能夠讓我們去很好的去知道具體的顏色的色值的設置。但是復制起來我覺得最方便的還是HEX，也就是16進制的，所以這個東西一般來說就是直接復制過來用。

·然后來看下RG.B，RG.B就很好理解了，RGB就是red、green還有就是blue，就是也是三原色，就這樣一個設置，注意它的寫法是這樣的，RGB然后一個原跨號，然后里面是三個顏色的色值，然后中間用這種逗號來分隔一下，然后這個都是每一個顏色的色值都是0到255，0到255，0是最小，25是最大。

·如果說像這個，車里就是紅色強度已經是最強了，是這樣的一個意思，它這個數值越小，顏色強度就越弱。比如說可以把這個顏色給它復制過來看一下，它就是這樣的一個顏色，比如說可以調一下，比如說125就變成這樣的一個顏色了。

·那它也有一個RGBA，其實就是后面再加一位這種0到1的值，比如說0.2，0.2就是它的一個不透明度了，不透明度，比如說給它這里去設置一個0.2，那它就有這個不透明度透明的效果了。

·這個是RGB和RG.BA，這個也很好理解，注意它每一位都是0到255這樣的一個設置方式，每一位的這個數值。

·如果是這個純白純黑，其實這里255、255、255，在255、255、255，三個255其實就是一個純白，跟這個ff是一樣的，然后純黑是這樣，零零零三個0。

·那這個其他的紅色、這個就更好理解。紅色就是255，其他都是0。綠色就是第二個255，其他都是0。藍色255，其他都是0。

·來看一下另外一個叫HSL和H.S.LA。這個a大家一看就知道什么意思了，a還是阿爾法的意思，也就是它的不透明的值。

·HSL是什么意思？a是一種顏色模式。它其實英文的全稱應該是Hue Saturation，還有lightnes.s，也就是色相、飽和度、亮度三個這樣的方面來設置顏色的值。它的寫法大概是這個樣子，給大家看一下，這個我也很少用，是這樣的寫法。

·它這里其實就是HSL，三個部分分別對應H.SL。H其實是色輪的概念，它就是有個360度，所以H的范圍是0到360。另外的兩個S就是0到100%，L也是一樣的0%到10.0%。如果是HSLA，它其實也是0到1，比如0.2，是這樣一個模式。

所以它這個寫法其實跟RGB的基本的格式是一樣的，都是它的顏色模式的名字，圓括號，里面再是每一個對應的設置內容的值。這是這三種顏色的色值的設置模式。

·自己最常用的就是16進制的，還有比較常用的，還有就是RGB和RGBA。

言

通常，我們為div盒子或者圖片設置陰影使用 box-shadow 屬性，代碼如下：

box-shadow: 10px 10px 10px gray;

問題拋出

使用 box-shadow 屬性給div盒子設置陰影倒還好，如果用在透明的圖片上，陰影會變成方形的，讓其看起來像添加了一個邊框一樣。

解決方法

我們可以通過css的另一種參數，為透明png實現基于透明圖片的陰影效果，效果如下圖，左側是 box-shadow ，右側 drop-shadow 。

drop-shadow()說明：

drop-shadow() 是CSS中用于為圖像或文本添加陰影效果的一個函數，?它屬于 filter 屬性的一部分。?這個函數允許你為元素創建陰影，?而不需要考慮元素的形狀或邊界框。?與 box-shadow 不同，?drop-shadow 可以應用于非矩形形狀，?如透明的PNG或SVG圖像，?它使用元素的Alpha蒙版來決定陰影的形狀。?這意味著，?即使元素沒有背景，drop-shadow 也能為圖像的非透明部分創建陰影。?

drop-shadow()語法如下：

filter: drop-shadow( offset-x offset-y blur-radius spread-radius color )

drop-shadow()參數說明如下：

offset-x：該參數設置圖像的水平偏移量。正值創建右側偏移，負值創建左側偏移。
offset-y：此參數設置圖像的垂直偏移量。正值創建到底部的偏移量，負值創建到頂部的偏移量。
blur-radius：設置模糊半徑的值。它是一個可選參數。
spread-radius：設置傳播半徑的值。它是一個可選參數。
color：設置投影的顏色。它的可選參數。

演示代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .img_box .left_img{
      box-shadow: 10px 10px 10px gray;
    }
    .img_box .right_img{
      filter: drop-shadow(2px 4px 8px rgb(225, 170, 170));
    }
  </style>
</head>
<body>

  <div class="img_box">
    <img class="left_img" src="./lihua.png" />
    <img class="right_img" src="./lihua.png" />
  </div>
  
</body>
</html>

總結

盡管有很好的支持，但 drop-shadow 濾鏡仍然沒有得到充分的利用。我希望這篇文章強調了一些使用 box-shadow的情況，也許你可以在你的下一個項目中使用它！

色與單位

背景色

背景色寫法：background-color:顏色;

 background-color:顏色;

為窗口設置背景色:

 body {
       background-color: chartreuse;
     }

效果：

在線咨詢

上一篇：HTML跳轉到頁面指定位置的幾種方法
下一篇：HTML5特效庫 9款css3鼠標劃過圖片散開特效源碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商