整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          css中的各種顏色格式

          css中的各種顏色格式

          頭條創(chuàng)作挑戰(zhàn)賽#

          顏色對(duì)于 css 來說是非常重要的,網(wǎng)站之所以會(huì)呈現(xiàn)出五彩斑斕的樣式,就是這些顏色樣式起的作用。在 css 中,對(duì)于顏色樣式有很多種表達(dá)方式,今天我們就來盤點(diǎn)下 css 中顏色的格式。

          名字顏色

          在 css 中,默認(rèn)定義了很多名字顏色,比較常見的比如 yellow,blue,red,pink 等,實(shí)際上,css 中一共定義了 140 個(gè)顏色名字,這些名字你都可以直接拿來使用。雖然 140 種看起來很多,但是實(shí)際上它比 8bit 的顏色還要少,因此,平時(shí)我們很少使用它。

          RGB

          這是一種顏色格式,從名字我們就知道它是 red,green,blue 三種顏色的簡(jiǎn)寫,我們都知道三原色原理,也就是通過三種基本顏色,我們就可以組合出其它的顏色出來,因此,rgb 就可以表示出我們可以看到的各種顏色。

          在 css 中,red,green,blue 被稱作三通道,每個(gè)通道的值是從 0-255,通過混合這些通道顏色,我們就可以創(chuàng)造出 1600 多萬種顏色。需要注意的是 rgb(255,255,255,0.5) 允許我們有第四個(gè)參數(shù),它的值從 0-1,用來表示透明度。

          .translucent-box {
            background: rgb(255 0 0 / 0.5);
          }
          

          Hex Codes

          通過十六進(jìn)制數(shù)字來表示顏色代碼,6 位數(shù)字被分成了三組,每?jī)晌灰唤M,一位是 16,兩位就是 16*16=256,所以它其實(shí)和 RGB 基本是相同的,只不過它是用 16 進(jìn)制進(jìn)行表示。

          它的三組也是代表著 red,green,blue,和 RGB 一樣的是,它也可以指定透明度,也就是說我們可以使用 8 位十六進(jìn)制來表示顏色。

          .translucent-box {
            background: #ffff0080;
          }
          

          HSL

          和 RGB 不同的是,HSL 是通過指定色調(diào),飽和度,亮度來表示顏色的。

          在 HSL 中,我們的色調(diào)是在 0deg-360deg 之間,轉(zhuǎn)一圈的大致顏色范圍就是紅橙黃綠青藍(lán)紫,飽和度是在 0-100%之間,亮度是在 0%-100%之間。

          HSL 是可以和 RGB 進(jìn)行轉(zhuǎn)換的,其中色調(diào)的轉(zhuǎn)換公式比較復(fù)雜。

          .translucent-box {
            background-color: hsl(0deg 100% 2%);
          }
          

          P3

          P3 是一個(gè)在繼承 sRGB 色彩空間范圍之外,又提供了更亮更充滿活力的色彩范圍,也就是說 P3 表示的色彩范圍要更大。

          因此,使用 P3 的時(shí)候,需要使用特殊的屬性值 color 形式來表示,但是對(duì)于 color 這個(gè)屬性,目前只有 safari 支持。

          .translucent-box {
            background: color(display-p3 1 0 0);
          }
          

          LCH

          因?yàn)?HSL 對(duì)于不同顏色在表示亮度的時(shí)候給人的感覺是不同的,因此,人們發(fā)明了 LCH 用來更接近人眼感知的色彩表示方式。

          LCH 代表 “亮度色相”。“色度”或多或少是“飽和度”的同義詞。它在概念上與 HSL 非常相似,但有兩個(gè)很大的區(qū)別:

          • 如前所述,它優(yōu)先考慮人類的感知,因此具有相同“亮度”值的兩種顏色將感覺同樣輕。
          • 它不綁定到任何特定的顏色空間。

          與我們看到的其他顏色格式不同,LCH 不受 sRGB 的約束。它甚至沒有綁定到 P3!它通過對(duì)色度沒有上限來實(shí)現(xiàn)這一點(diǎn)。

          在 HSL 中,飽和度范圍從 0%(無飽和)到 100%(完全飽和)。這是可能的,因?yàn)槲覀冎牢覀冋谡務(wù)?sRGB 色彩空間,一個(gè)有限的調(diào)色板。

          但是 LCH 與特定的色彩空間無關(guān),因此我們不知道飽和上限在哪里。它不是一成不變的:隨著顯示技術(shù)的不斷改進(jìn),我們可以期待顯示器達(dá)到越來越寬的色域。LCH 將自動(dòng)能夠通過調(diào)高色度來引用這些擴(kuò)展的顏色。談?wù)撁嫦蛭磥恚?/span>

          .translucent-box {
            background: lch(50% 120 20);
          }
          

          總結(jié)

          CSS 是一種令人驚訝的難以掌握的語言。無論花了多少年練習(xí),總會(huì)覺得有很多我不知道的東西。

          就目前而言,在 LCH 沒有被完全支持的情況下,HSL 也許更加適合表達(dá)。

          所以說很多時(shí)候,當(dāng)我們以為自己已經(jīng)很熟悉或者掌握一門語言的時(shí)候,其實(shí)可能我們才僅僅是剛?cè)腴T而已,任何知識(shí)當(dāng)我們深入研究的時(shí)候我們都會(huì)發(fā)現(xiàn)我們對(duì)它的了解其實(shí)并不是真的很透徹。

          CSS 是什么?

          CSS是Cascading Style Sheets的簡(jiǎn)稱,中文稱為層疊樣式表。

          屬性和屬性值用冒號(hào)隔開,以分號(hào)結(jié)尾。

          CSS 四種引入方式:

          1.行內(nèi)式

          行內(nèi)式是在標(biāo)簽的style屬性中設(shè)定CSS樣式。

          <div style="..."></div>

          2.嵌入式

          嵌入式是將CSS樣式集中寫在網(wǎng)頁的<head>標(biāo)簽的<style></style>標(biāo)簽對(duì)中。

          <head>
          
              ...
          
              <style type="text/css">
          
                  ...此處寫CSS樣式
          
              </style>
          
          </head>

          3.導(dǎo)入式
          將一個(gè)獨(dú)立的.css文件引入HTML文件中,導(dǎo)入式使用@import 引入外部CSS文件,<style>標(biāo)記也是寫在<head>標(biāo)記中。

          導(dǎo)入式會(huì)在整個(gè)網(wǎng)頁裝載完后再裝載CSS文件。

          <head>
          
              ...
          
              <style type="text/css">
          
                  @import "My.css"; 此處注意.css文件的路徑
          
              </style>
          
          </head>

          4.鏈接式
          將一個(gè)獨(dú)立的.css文件引入到HTML文件中,使用<link>標(biāo)記寫在<head>標(biāo)記中。

          鏈接式會(huì)以網(wǎng)頁文件主體裝載前裝載CSS文件。

          <head>
          
              ...
          
              <link href="My.css" rel="stylesheet" type="text/css">
          
          </head>
          
          

          樣式應(yīng)用順序:

          • 行內(nèi)樣式優(yōu)先級(jí)最高
          • 針對(duì)相同的樣式屬性,不同的樣式屬性將以合并的方式呈現(xiàn)
          • 相同樣式并且相同屬性,呈現(xiàn)方式在<head>中的順序決定,后面會(huì)覆蓋前面屬性
          • !important 指定樣式規(guī)則應(yīng)用最優(yōu)先
          .nick {
              color: yellow !important;
          }

          選擇器(Selector)

          基本選擇器:

          1.通用元素選擇器

          * 表示應(yīng)用到所有的標(biāo)簽。

          * {color: yellow}

          2.標(biāo)簽選擇器

          匹配所有使用 div 標(biāo)簽的元素(可以匹配所有標(biāo)簽)

          div {color: yellow}

          3.類選擇器

          匹配所有class屬性中包含info的元素。

          語法:.類名{樣式}(類名不能以數(shù)字開頭,類名要區(qū)分大小寫。)

          .Mycolor {color: yellow}
          <h3 class="Mycolor">nick</h3>

          4.ID選擇器

          使用id屬性來調(diào)用樣式,在一個(gè)網(wǎng)頁中id的值都是唯一的(是W3C規(guī)范而不是規(guī)則,所以不會(huì)報(bào)錯(cuò))。

          語法:#ID名{樣式}(ID名不能以數(shù)字開頭)

          #Mycolor {color: yellow}
          <h3 id="Mycolor">Nick.</h3>

          組合選擇器:

          1.多元素選擇器

          同時(shí)匹配h3,h4標(biāo)簽,之間用逗號(hào)分隔。

          h3,h4 {color: yellow;}
          <h3>Nick</h3>
          <h4>Jenny</h4>
          

          2.后代元素選擇器

          匹配所有div標(biāo)簽里嵌套的P標(biāo)簽,之間用空格分隔。

              div p {color: yellow;}
          <div>
              <p>Nick</p>
              <div>
                  <p>Nick</p>
              </div>
          </div>

          3.子元素選擇器

          匹配所有div標(biāo)簽里嵌套的子P標(biāo)簽,之間用>分隔。

              div > p {color: yellow;}
          <div>
              <p>Nick</p>
              <p>Nick</p>
          </div>

          4.毗鄰元素選擇器

          匹配所有緊隨div標(biāo)簽之后的同級(jí)標(biāo)簽P,之間用+分隔(只能匹配一個(gè))。

              div + p {color: yellow;}
          <div>Nick</div>
          <p>Nick</p>

          屬性選擇器:

          1.[title] & P[title]

          設(shè)置所有具有title屬性的標(biāo)簽元素;

          設(shè)置所有具有title屬性的P標(biāo)簽元素。

              [title]
              {
                  color: yellow;
              }
              p[title]
              {
                  color: yellow;
              }
           
          <div title>Nick</div>
          <p title>Nick</p>

          2.[title=Nick]

          設(shè)置所有title屬性等于“Nick”的標(biāo)簽元素。

              [title="Nick"]
              {
                  color: yellow;
              }
          <p title="Nick">Nick</p>

          3.[title~=Nick]

          設(shè)置所有title屬性具有多個(gè)空格分隔的值、其中一個(gè)值等于“Nick”的標(biāo)簽元素。

              [title~="Nick"]
              {
                  color: yellow;
              }
          <p title="Nick Jenny">Nick</p>
          <p title="Jenny Nick">Nick</p>

          4.[title|=Nick]

          設(shè)置所有title屬性具有多個(gè)連字號(hào)分隔(hyphen-separated)的值、其中一個(gè)值以"Nick"開頭的標(biāo)簽元素。

          例:lang屬性:"en"、"en-us"、"en-gb"等等

              [title|="Nick"]
              {
                  color: yellow;
              }
           <p title="Nick-Jenny">Nick</p>
          

          5.[title^=Nick]

          設(shè)置屬性值以指定值開頭的每個(gè)標(biāo)簽元素。

              [title^="Nick"]
              {
                  color: yellow;
              }
          <p title="NickJenny">Nick</p>

          6.[title$=Nick]

          設(shè)置屬性值以指定值結(jié)尾的每個(gè)標(biāo)簽元素。

              [title$="Nick"]
              {
                  color: yellow;
              }
          <p title="JennyNick">Nick</p>

          7.[title*=Nick]

          設(shè)置屬性值中包含指定值的每個(gè)元素

          [title*="Nick"]
              {
                  color: yellow;
              }
           
          <p title="SNickJenny">Nick</p>

          偽類選擇器:

          1. link、hover、active、visited

          • a:link(未訪問的鏈接狀態(tài)),用于定義了常規(guī)的鏈接狀態(tài)。
          • a:hover(鼠標(biāo)放在鏈接上的狀態(tài)),用于產(chǎn)生視覺效果。
          • a:active(在鏈接上按下鼠標(biāo)時(shí)的狀態(tài))。
          • a:visited(已訪問過的鏈接狀態(tài)),可以看出已經(jīng)訪問過的鏈接。
              a:link{color: black}
              a:hover{color: yellow}
              a:active{color: blue}
              a:visited{color: red} 
          <a href="#">Nick</a>

          2. before、after

          • P:before 在每個(gè)<p>元素的內(nèi)容之前插入內(nèi)容;
          • P:after 在每個(gè)<p>元素的內(nèi)容之后插入內(nèi)容。
              p {
                  color: yellow;
              }
              p:before{
                  content: "before...";
              }
              p:after{
                  content: "after...";
              }
           <p> Nick </p>  

          常用屬性

          1. 顏色屬性:

          color

          • HEX(十六進(jìn)制色:color: #FFFF00 --> 縮寫:#FF0)
          • RGB(紅綠藍(lán),使用方式:color:rgb(255,255,0)或者color:rgb(100%,100%,0%))
          • RGBA(紅綠藍(lán)透明度,A是透明度在0~1之間取值。使用方式:color:rgba(255,255,0,0.5))
          • HSL(CSS3有效,H表示色調(diào),S表示飽和度,L表示亮度,使用方式:color:hsl(360,100%,50%))
          • HSLA(和HSL相似,A表示Alpha透明度,取值0~1之間。)

          transparent

          • 全透明,使用方式:color: transparent;

          opacity

          • 元素的透明度,語法:opacity: 0.5;
          • 屬性值在0.0到1.0范圍內(nèi),0表示透明,1表示不透明。
          • filter濾鏡屬性(只適用于早期的IE瀏覽器,語法:filter:alpha(opacity:20);)。

          2. 字體屬性:

          font-style: 用于規(guī)定斜體文本

          • normal 文本正常顯示
          • italic 文本斜體顯示
          • oblique 文本傾斜顯示

          font-weight: 設(shè)置文本的粗細(xì)

          • normal(默認(rèn))
          • bold(加粗)
          • bolder(相當(dāng)于<strong>和<b>標(biāo)簽)
          • lighter (常規(guī))
          • 100 ~ 900 整百(400=normal,700=bold)

          font-size: 設(shè)置字體的大小

          • 默認(rèn)值:medium
          • <absolute-size>可選參數(shù)值:xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
          • <relative-size>相對(duì)于父標(biāo)簽中字體的尺寸進(jìn)行調(diào)節(jié)。可選參數(shù)值:smaller、 larger
          • <percentage>百分比指定文字大小。
          • <length>用長(zhǎng)度值指定文字大小,不允許負(fù)值。

          font-family:字體名稱

          • 使用逗號(hào)隔開多種字體(優(yōu)先級(jí)從前向后,如果系統(tǒng)中沒有找到當(dāng)前字體,則往后面尋找)

          font:簡(jiǎn)寫屬性

          • 語法:font:字體大小/行高 字體;(字體要在最后)

          3. 文本屬性:

          white-space: 設(shè)置元素中空白的處理方式

          • normal:默認(rèn)處理方式。
          • pre:保留空格,當(dāng)文字超出邊界時(shí)不換行
          • nowrap:不保留空格,強(qiáng)制在同一行內(nèi)顯示所有文本,直到文本結(jié)束或者碰到br標(biāo)簽
          • pre-wrap:保留空格,當(dāng)文字碰到邊界時(shí)換行
          • pre-line:不保留空格,保留文字的換行,當(dāng)文字碰到邊界時(shí)換行

          direction: 規(guī)定文本的方向

          • ltr 默認(rèn),文本方向從左到右。
          • rtl 文本方向從右到左。

          text-align: 文本的水平對(duì)齊方式

          • left
          • center
          • right

          line-height: 文本行高

          • normal 默認(rèn)

          vertical-align: 文本所在行高的垂直對(duì)齊方式

          • baseline 默認(rèn)
          • sub 垂直對(duì)齊文本的下標(biāo),和<sub>標(biāo)簽一樣的效果
          • super 垂直對(duì)齊文本的上標(biāo),和<sup>標(biāo)簽一樣的效果
          • top 對(duì)象的頂端與所在容器的頂端對(duì)齊
          • text-top 對(duì)象的頂端與所在行文字頂端對(duì)齊
          • middle 元素對(duì)象基于基線垂直對(duì)齊
          • bottom 對(duì)象的底端與所在行的文字底部對(duì)齊
          • text-bottom 對(duì)象的底端與所在行文字的底端對(duì)齊

          text-indent: 文本縮進(jìn)

          letter-spacing: 添加字母之間的空白

          word-spacing: 添加每個(gè)單詞之間的空白

          text-transform: 屬性控制文本的大小寫

          • capitalize 文本中的每個(gè)單詞以大寫字母開頭。
          • uppercase 定義僅有大寫字母。
          • lowercase 定義僅有小寫字母。

          text-overflow: 文本溢出樣式

          • clip 修剪文本。
          • ellipsis 顯示省略符號(hào)...來代表被修剪的文本。
          • string 使用給定的字符串來代表被修剪的文本。
          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Title</title>
              <!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
              <style>
                  div {
                      width: 100px;
                      height: 100px;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                  }
              </style>
          </head>
          <body>
              <div>索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧</div>
          </body>
          </html>

          text-decoration: 文本的裝飾

          • none 默認(rèn)。
          • underline 下劃線。
          • overline 上劃線。
          • line-through 中線。

          text-shadow:文本陰影

          • 第一個(gè)參數(shù)是左右位置
          • 第二個(gè)參數(shù)是上下位置
          • 第三個(gè)參數(shù)是虛化效果
          • 第四個(gè)參數(shù)是顏色
          • text-shadow: 5px 5px 5px #888;

          word-wrap:自動(dòng)換行

          • word-wrap: break-word;
          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Title</title>
              <style>
                  p {
                      width: 150px;
                      height: 160px;
                      background-color: #FFA500;
                      /*邊框陰影*/
                      box-shadow: 10px 10px 5px #888;
                      /*自動(dòng)換行*/
                      word-wrap: break-word;
                  }
                  h1 {
                      text-shadow: 5px 5px 5px #888;
                  }
              </style>
          </head>
          <body>
              <p>
                  When you are old and grey and full of sleep,And nodding by the fire, take down this book,And slowly read, and dream of the soft look
              </p>
              <h1>索寧</h1>
          </body>
          </html>    

          a {
              text-decoration: none;
              /*去除a標(biāo)簽下劃線*/
          }

          4. 背景屬性

          background-color: 背景顏色

          background-image 設(shè)置圖像為背景

          • url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png"); 圖片地址
          • background-image:linear-gradient(green,blue,yellow,red,black); 顏色漸變效果

          background-position 設(shè)置背景圖像的位置坐標(biāo)

          • background-position: center center; 圖片置中,x軸center,y軸center
          • 1px -195px 截取圖片某部分,分別代表坐標(biāo)x,y軸

          background-repeat 設(shè)置背景圖像不重復(fù)平鋪

          • no-repeat 設(shè)置圖像不重復(fù),常用
          • round 自動(dòng)縮放直到適應(yīng)并填充滿整個(gè)容器
          • space 以相同的間距平鋪且填充滿整個(gè)容器

          background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)

          background 簡(jiǎn)寫

          • background: url("o_ns.png") no-repeat 0 -196px;
          • background: url("o_ns.png") no-repeat center bottom 15px;
          • background: url("o_ns.png") no-repeat left 30px bottom 15px;

          5. 列表屬性

          list-style-type: 列表項(xiàng)標(biāo)志的類型

          • none 去除標(biāo)志
          • decimal-leading-zero; 02.
          • square; 方框
          • circle; 空心圓
          • upper-alph; & disc; 實(shí)心圓

          list-style-image:將圖象設(shè)置為列表項(xiàng)標(biāo)志

          list-style-position:列表項(xiàng)標(biāo)志的位置

          • inside
          • outside

          list-style:縮寫

          頁面布局

          1. 邊框

          border-style:邊框樣式

          • solid 默認(rèn),實(shí)線
          • double 雙線
          • dotted 點(diǎn)狀線條
          • dashed 虛線

          border-color:邊框顏色

          border-width:邊框?qū)挾?/strong>

          border-radius:圓角

          • 1個(gè)參數(shù):四個(gè)角度應(yīng)用
          • 2個(gè)參數(shù):第一個(gè)參數(shù)應(yīng)用于 左上、右下;第二個(gè)參數(shù)應(yīng)用于 左下、右上
          • 3個(gè)參數(shù):第一個(gè)參數(shù)應(yīng)用于 左上;第二個(gè)參數(shù)應(yīng)用于 左下、右上;第三個(gè)參數(shù)應(yīng)用于右下
          • 4個(gè)參數(shù):左上、右上、右下、左下(順時(shí)針)

          border: 簡(jiǎn)寫

          • border: 2px yellow solid;

          box-shadow:邊框陰影

          • 第一個(gè)參數(shù)是左右位置
          • 第二個(gè)參數(shù)是上下位置
          • 第三個(gè)參數(shù)是虛化效果
          • 第四個(gè)參數(shù)是顏色
          • box-shadow: 10px 10px 5px #888;
          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Title</title>
              <style>
                  div {
                      border:2px solid;
                      border-radius:25px;
                      width: 140px;
                  }
              </style>
          </head>
          <body>
              <div>
                   點(diǎn)贊哦!dear. 
              </div>
          </body>
          </html>

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Title</title>
              <style>
                  .radius1 {
                      display: inline-block;
                      width: 100px;
                      height: 100px;
                      background-color: yellow;
                      border-radius: 20px;
                  }
                  .radius2 {
                      display: inline-block;
                      width: 100px;
                      height: 100px;
                      background-color: red;
                      border-radius: 20px 35px;
                  }
                  .radius3 {
                      display: inline-block;
                      width: 100px;
                      height: 100px;
                      background-color: blue;
                      border-radius: 20px 35px 50px;
                  }
                  .radius4 {
                      display: inline-block;
                      width: 100px;
                      height: 100px;
                      background-color: green;
                      border-radius: 20px 35px 50px 60px;
                  }
              </style>
          </head>
          <body>
              <div>
                  <span class="radius1"></span>
                  <span class="radius2"></span>
                  <span class="radius3"></span>
                  <span class="radius4"></span>
              </div>
          </body>
          </html>

          邊框?qū)崿F(xiàn)各種三角符號(hào):

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Title</title>
              <style>
                  .triangle-one {
                      display: inline-block;
                      border-top: 50px red solid;
                      border-right: 50px green solid;
                      border-bottom: 50px yellow solid;
                      border-left: 50px blue solid;
                  }
                  .triangle-two {
                      display: inline-block;
                      border-top: 0 red solid;
                      border-right: 50px green solid;
                      border-bottom: 50px yellow solid;
                      border-left: 50px blue solid;
                  }
                  .triangle-stree {
                      display: inline-block;
                      border-top: 50px red solid;
                      border-right: 0 green solid;
                      border-bottom: 50px yellow solid;
                      border-left: 50px blue solid;
                  }
                  .triangle-four {
                      display: inline-block;
                      border-top: 50px red solid;
                      border-right: 0 green solid;
                      border-bottom: 0 yellow solid;
                      border-left: 50px blue solid;
                  }
           
                  .triangle-five {
                      display: inline-block;
                      border: 50px transparent solid;
                      border-top: 50px red solid;
                  }
                  .triangle-six {
                      display: inline-block;
                      border: 50px transparent solid;
                      border-bottom: 50px yellow solid;
                  }
                  .triangle-seven {
                      display: inline-block;
                      border: 50px transparent solid;
                      border-top: 60px red solid;
                      border-right: 0;
                  }
                  .triangle-eight {
                      display: inline-block;
                      border: 50px transparent solid;
                      border-left: 30px yellow solid;
                      border-bottom: 0;
                  }
              </style>
          </head>
          <body>
              <div class="triangle-one"></div>
              <div class="triangle-two"></div>
              <div class="triangle-stree"></div>
              <div class="triangle-four"></div>
              <div class="triangle-five"></div>
              <div class="triangle-six"></div>
              <div class="triangle-seven"></div>
              <div class="triangle-eight"></div>
          </body>
          </html>

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Title</title>
              <style>
                  .back {
                      width: 1000px;
                      height: 1000px;
                      margin: 0 auto;
                      background-color: #ddd;
                      position: relative;
                  }
                  .back-in {
                      position: absolute;
                      width: 1020px;
                      height: 45px;
                      left: -20px;
                      top: 50px;
                      background-color: #2F4F4F;
                  }
                  .back-img {
                      border: 20px solid transparent;
                      border-top: 10px solid dimgrey;
                      border-right: 0;
                      display: inline-block;
                      position: absolute;
                      top: 95px;
                      left: -20px;
                  }
                  .back-font {
                      line-height: 9px;
                      margin-left: 30px;
                      color: white;
                  }
              </style>
          </head>
          <body>
              <div class="back">
                  <div class="back-in"><h3 class="back-font">妹子求關(guān)注 ^.^</h3></div>
                  <div class="back-img"></div>
              </div>
          </body>
          </html>

          2.★ 盒子模型

          一個(gè)標(biāo)準(zhǔn)的盒子模型:

          padding:用于控制內(nèi)容與邊框之間的距離;

          margin: 用于控制元素與元素之間的距離;

          一個(gè)參數(shù),應(yīng)用于四邊。

            兩個(gè)參數(shù),第一個(gè)用于上、下,第二個(gè)用于左、右。

            三個(gè)參數(shù),第一個(gè)用于上,第二個(gè)用于左、右,第三個(gè)用于下。

          邊框在默認(rèn)情況下會(huì)定位于瀏覽器窗口的左上角,但是并沒有緊貼著瀏覽器的窗口的邊框,這是因?yàn)閎ody本身也是一個(gè)盒子,外層還有html,
          在默認(rèn)情況下,body距離html會(huì)有若干像素的margin,所以body中的盒子不會(huì)緊貼瀏覽器窗口的邊框了。
          
          解決方法:
          body {
              margin: 0;
          }

          3.★ display

          • none 不顯示。
          • block 顯示為塊級(jí)元素。
          • inline 顯示為內(nèi)聯(lián)元素。
          • inline-block 行內(nèi)塊元素(會(huì)保持塊元素的高寬)。
          • list-item 顯示為列表元素。

          4. visibility

          • visible 元素可見
          • hidden 元素不可見
          • collapse 當(dāng)在表格元素中使用時(shí),此值可刪除一行或一列,不會(huì)影響表格的布局。

          5.★ float 浮動(dòng)

          讓一行顯示兩個(gè)塊級(jí)標(biāo)簽,會(huì)脫離文檔流

          • none
          • left 左浮動(dòng)
          • right 右浮動(dòng)

          clear 清除浮動(dòng):

          • none : 默認(rèn)值。允許兩邊都可以有浮動(dòng)對(duì)象
          • left : 不允許左邊有浮動(dòng)對(duì)象
          • right : 不允許右邊有浮動(dòng)對(duì)象
          • both : 不允許兩邊有浮動(dòng)對(duì)象

          6. clip 剪裁圖像

          rect 剪裁定位元素:

          • auto 默認(rèn)值,無剪切
          • 上-右-下-左(順時(shí)針)的順序提供四個(gè)偏移值
          • 區(qū)域外的部分是透明的
          • 必須指定 position:absolute;
          • 例:clip:rect(0px,60px,200px,0px);

          7. overflow 設(shè)置當(dāng)對(duì)象的內(nèi)容超過其指定高度及寬度時(shí)如何顯示內(nèi)容

          • visible 默認(rèn)值,內(nèi)容不會(huì)被修剪,會(huì)呈現(xiàn)在元素框之外。
          • hidden 內(nèi)容會(huì)被修剪,并且其余內(nèi)容是不可見的。
          • scroll 內(nèi)容會(huì)被修剪,但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
          • auto 如果內(nèi)容被修剪,則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。

          8.★ position 規(guī)定元素的定位類型

          • 通過以下四種屬性進(jìn)行定位:
          • left
          • top
          • right
          • bottom
          • z-index

          9. z-index 元素層疊順序

          • z-index 僅在定位元素上有效(例:position:absolute;)
          • 可以指定負(fù)數(shù)屬性值(例:-1;)
          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Title</title>
              <style>
                  .z-index1 {
                      width: 100px;
                      height: 100px;
                      background-color: yellow;
                      position: absolute;
                      z-index: -1;
                  }
                  .z-index2 {
                      width: 100px;
                      height: 100px;
                      background-color: red;
                      position: absolute;
                      top: 20px;
                      left: 20px;
                      z-index: 5;
                  }
              </style>
          </head>
          <body>
              <div class="z-index1"></div>
              <div class="z-index2"></div>
          </body>
          </html>

          10. outline 邊框輪廓

          • outline-width 輪廓寬度
          • outline-color 輪廓顏色
          • outline-style 輪廓樣式

          11. zoom 縮放比例

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Title</title>
              <style>
                  .zoom1 {
                      zoom: 100%;
                  }
                  .zoom2 {
                      zoom: 150%;
                  }
                  .zoom3 {
                      zoom: 200%;
                  }
              </style>
          </head>
          <body>
              <div class="zoom1">Nick 100%</div>
              <div class="zoom2">Nick 200%</div>
              <div class="zoom3">Nick 300%</div>
          </body>
          </html>

          12. cursor 鼠標(biāo)的類型形狀

          鼠標(biāo)放在以下單詞上,There will be a miracle:

          url: 自定義光標(biāo)

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Title</title>
              <!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
              <style>
                  body {
                      cursor: url("mouse.png"), auto;
                      /*圖片地址:http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png*/
                  }
              </style>
          </head>
          <body>
              <div><img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" height="100%" width="100%"></div>
          </body>
          </html>

          Auto: 默認(rèn)
          Default: 默認(rèn)
          e-resize
          ne-resize
          nw-resize
          n-resize
          se-resize
          sw-resize
          s-resize
          w-resize
          Crosshair
          Pointer
          Move
          text
          wait
          help

          not-allowed

          13. transform、transition 動(dòng)畫效果

          transform 轉(zhuǎn)換,變形

          • origin 定義旋轉(zhuǎn)基點(diǎn)(left top center right bottom 坐標(biāo)值) transform-origin: 50px 50px; transform-origin: left;。
          • rotate 旋轉(zhuǎn) transform:rotate(50deg) 旋轉(zhuǎn)角度可以為負(fù)數(shù),需要先定義origin。
          • skew 扭曲 transform:skew(50deg,50deg) 分別為相對(duì)x軸傾斜,相對(duì)y軸傾斜。
          • scale 縮放 transform:scale(2,3) 橫向放大2倍,縱向放大3倍;transform:scale(2) 橫豎都放大2倍。
          • translate 移動(dòng) transform:translate(50px, 50px) 分別為相對(duì)x軸移動(dòng),相對(duì)y軸移動(dòng)。
          <!DOCTYPE html>
          <html>
          <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
              <title>nick</title>
              <meta charset="utf-8" />
              <style type="text/css">
                  div {
                      border: 1px solid black;
                      height: 30px;
                      width: 30px;
                      background-color: yellow;
           
                      /*transform-origin: 50px 50px;*/
                      transform-origin: left;
                      transform: rotate(50deg);
                      /*transform: skew(50deg,50deg);*/
                      /*transform: translate(50px,50px);*/
                      /*transform: scale(2);*/
                  }
              </style>
          </head>
          <body>
              <div></div>
          </body>
          </html>


          Transition 平滑過渡

          • transition-property: 變換的屬性(none(沒有屬性改變)、all(所有屬性改變)、具體屬性)
          • transition-duration: 變換持續(xù)時(shí)間
          • transition-timing-function: 變換的速率(ease:(逐漸變慢)、linear:(勻速)、ease-in:(加速)、ease-out:(減速)、ease-in-out:(加速然后減速)、cubic-bezier:(自定義時(shí)間曲線))
          • transition-delay: 變換延遲時(shí)間
          • transition: 縮寫
          #property 指定屬性對(duì)應(yīng)類型
          
          1、color: 通過紅、綠、藍(lán)和透明度組件變換(每個(gè)數(shù)值單獨(dú)處理),如:background-color,border-color,color,outline-color等CSS屬性;
          
          2、length:真實(shí)的數(shù)字,如:word-spacing,width,vertical- align,top,right,bottom,left,padding,outline-width,margin,min-width,min- height,max-width,max-height,line-height,height,border-width,border- spacing,background-position等屬性;
          
          3、percentage:真實(shí)的數(shù)字,如:word-spacing,width,vertical- align,top,right,bottom,left,min-width,min- height,max-width,max-height,line-height,height,background-position等屬性;
          
          4、integer 離散步驟(整個(gè)數(shù)字),在真實(shí)的數(shù)字空間,以及使用floor()轉(zhuǎn)換為整數(shù)時(shí)發(fā)生,如:outline-offset,z-index等屬性;
          
          5、number真實(shí)的(浮點(diǎn)型)數(shù)值,如:zoom,opacity,font-weight等屬性;
          
          6、transform list。
          
          7、rectangle:通過x、 y、 width和height(轉(zhuǎn)為數(shù)值)變換,如:crop;
          
          8、visibility:離散步驟,在0到1數(shù)字范圍之內(nèi),0表示“隱藏”,1表示完全“顯示”,如:visibility;
          
          9、shadow:作用于color、x、y、和blur(模糊)屬性,如:text-shadow;
          
          10、gradient:通過每次停止時(shí)的位置和顏色進(jìn)行變化。它們必須有相同的類型(放射狀的或是線性的)和相同的停止數(shù)值以便執(zhí)行動(dòng)畫,如:background-image;
          
          11、paint server (SVG):只支持下面的情況:從gradient到gradient以及color到color,然后工作與上面類似;
          
          12、space-separated list of above:如果列表有相同的項(xiàng)目數(shù)值,則列表每一項(xiàng)按照上面的規(guī)則進(jìn)行變化,否則無變化;
          
          13、a shorthand property:如果縮寫的所有部分都可以實(shí)現(xiàn)動(dòng)畫,則會(huì)像所有單個(gè)屬性變化一樣變化。
          #支持執(zhí)行transition效果的屬性
          
          Property Name    Type
          background-color    as color
          background-position    as repeatable list of simple list of length, percentage, or calc
          border-bottom-color    as color
          border-bottom-width    as length
          border-left-color    as color
          border-left-width    as length
          border-right-color    as color
          border-right-width    as length
          border-spacing    as simple list of length
          border-top-color    as color
          border-top-width    as length
          bottom    as length, percentage, or calc
          clip    as rectangle
          color    as color
          font-size    as length
          font-weight    as font weight
          height    as length, percentage, or calc
          left    as length, percentage, or calc
          letter-spacing    as length
          line-height    as either number or length
          margin-bottom    as length
          margin-left    as length
          margin-right    as length
          margin-top    as length
          max-height    as length, percentage, or calc
          max-width    as length, percentage, or calc
          min-height    as length, percentage, or calc
          min-width    as length, percentage, or calc
          opacity    as number
          outline-color    as color
          outline-width    as length
          padding-bottom    as length
          padding-left    as length
          padding-right    as length
          padding-top    as length
          right    as length, percentage, or calc
          text-indent    as length, percentage, or calc
          text-shadow    as shadow list
          top    as length, percentage, or calc
          vertical-align    as length
          visibility    as visibility
          width    as length, percentage, or calc
          word-spacing    as length
          z-index    as integer


          鼠標(biāo)放在以下圖片上,There will be a miracle:

          <!DOCTYPE html>
          <html>
          <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
              <title>nick</title>
              <meta charset="utf-8" />
              <style type="text/css">
                  .img-see-2016-7-2 {
                      background-image: url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_sea.jpg");
                      background-size: 660px;
                      background-repeat: no-repeat;
                      height: 300px;
                      width: 600px;
          
                      transition-duration: 30s;
                      transition-timing-function: ease;
                      transition-property: background-size;
                  }
                  .img-see-2016-7-2:hover {
                      background-size: 2000px;
                  }
              </style>
          </head>
          <body>
              <div class="img-see-2016-7-2"></div>
          </body>
          </html>

          作者:suoning

          原文鏈接:https://www.cnblogs.com/suoning/p/5625582.html

          文翻譯自 Color Formats in CSS,作者:Joshwcomeau。 略有刪改

          CSS 中的顏色格式可以采用不同的表示方式,包括常用的十六進(jìn)制、RGB、RGBA、HSL 和 HSLA 等格式。十六進(jìn)制是最常用的格式,使用 6 個(gè)十六進(jìn)制數(shù)字來表示顏色,例如 #FF0000 表示紅色;RGB 格式使用紅、綠、藍(lán)三個(gè)顏色通道的數(shù)值來表示顏色,例如 rgb(255,0,0) 也表示紅色;RGBA 格式在 RGB 的基礎(chǔ)上增加了一個(gè)透明度通道,用于控制顏色的不透明度;HSL 格式利用色相、飽和度和亮度三個(gè)參數(shù)來表示顏色,例如 hsl(0,100%,50%) 表示紅色;而 HSLA 格式則在 HSL 的基礎(chǔ)上增加了一個(gè)透明度通道。選擇和使用這些不同的顏色格式時(shí),需要考慮實(shí)際需求并進(jìn)行決策。

          對(duì)于不同的顏色格式,它們之間存在一些重要的區(qū)別。本文將帶您深入了解這些選項(xiàng),包括它們的工作原理、如何解析它們以及如何靈活應(yīng)用,以下是原文翻譯。


          CSS有很多不同的顏色格式:hex codes,rgb(),hsl(),lch(),等等!

          我們應(yīng)該用哪一個(gè)?這似乎是一個(gè)無關(guān)緊要的決定,但它們之間卻有一些非常重要的區(qū)別。而且,老實(shí)說我認(rèn)為我們大多數(shù)人都在優(yōu)先考慮使用錯(cuò)誤的方式。

          在本教程中,我將帶您瀏覽不同的選項(xiàng)。我們將看到它們是如何工作的,以及我們?nèi)绾卫盟鼈優(yōu)槲覀兏玫姆?wù)。后面我將向您展示現(xiàn)代CSS如何讓我們?cè)谶x擇正確的顏色格式時(shí)進(jìn)行動(dòng)態(tài)調(diào)整。

          命名式顏色名

          這并不是一個(gè)真正的顏色格式,但它是一個(gè)很好的開始!

          HTML有140種命名顏色。這些是特殊的關(guān)鍵字值,如dodgerbluehotpinktomato

          開發(fā)人員Anthony Lieuallen創(chuàng)建了這個(gè)簡(jiǎn)潔的演示,在一個(gè)圓圈中顯示了所有140種命名的Web顏色:

          由Anthony Lieuallen創(chuàng)作,MIT許可

          當(dāng)你需要一個(gè)占位符顏色時(shí),命名式顏色名是很好的。例如,如果您正在構(gòu)建原型并需要臨時(shí)值,或者如果您正在編寫教育內(nèi)容。在可讀性方面,沒有什么比color: red更好。

          這可能是不言而喻的,實(shí)際開發(fā)中140種顏色是不夠的,通常不會(huì)使用命名的顏色在生產(chǎn)環(huán)境中。

          看看這兩種命名的顏色:

          “darkgray”實(shí)際上是比“gray”更淺的顏色? 這是因?yàn)?40種命名的Web顏色來自不同的地方,包括HTML4規(guī)范,X11 Unix窗口系統(tǒng)等。這是一個(gè)不同調(diào)色板的大雜燴,沒有一個(gè)好的規(guī)范約束。

          RGB

          這是我們的第一個(gè)“真實(shí)的”顏色格式。以下是我們?nèi)绾问褂盟?/span>

          color: rgb(255 0 0);
          

          對(duì)應(yīng)顯示的樣式如下:

          像大多數(shù)顏色格式一樣,rgb是一個(gè)縮寫。它代表綠色藍(lán)。

          在我們今天要學(xué)習(xí)的所有顏色格式中,rgb是最不抽象的。你的電腦/手機(jī)顯示屏實(shí)際上只是數(shù)百萬個(gè)微小的紅色、綠色和藍(lán)色LED的集合,它們被組裝成像素。因此,rgb顏色格式允許我們直接調(diào)整這些燈光的亮度。

          每個(gè)值(紅色、綠色、藍(lán)色)被稱為通道。每個(gè)通道從0到255。通過將這些通道以不同的量混合,我們可以創(chuàng)造超過1600萬種不同的顏色。

          RGB顏色的巧妙之處在于它是基于光的物理學(xué)。我們可以混合紅色、綠色和藍(lán)色光來創(chuàng)造任何顏色。把它們調(diào)到255,我們得到白色。把它們都設(shè)為0,剩下黑色。

          rgb color格式還允許我們?yōu)閍lpha通道指定第四個(gè)可選值,以控制透明度:

          background: rgb(255 0 0 / 0.5);
          

          以上代碼設(shè)置了紅色50%的透明度,最終的樣式的如下:

          Alpha通道的范圍從0(完全不可見)到1(完全不透明)。介于兩者之間的任何東西都會(huì)產(chǎn)生半透明的顏色。

          十六進(jìn)制顏色

          這可能是網(wǎng)絡(luò)上最常用的顏色格式。它看起來像這樣:

          color: #FF0000;
          

          它的工作原理如下:6位十六進(jìn)制碼包含三個(gè)2位值,每個(gè)通道一個(gè)值(紅/綠色/藍(lán))。它不使用10位十進(jìn)制系統(tǒng),而是使用16位十六進(jìn)制系統(tǒng)。

          以下圖示可以更加了解十六進(jìn)制代碼的工作原理(原文可拖動(dòng)滑塊實(shí)時(shí)更新顏色):

          基本上,十六進(jìn)制代碼與RGB值相同。在這兩種情況下,我們都為紅色、綠色和藍(lán)色提供了一個(gè)值。 background: #FFFF0080; 在十進(jìn)制系統(tǒng)中,一個(gè)兩位數(shù)的值可以包含100個(gè)可能的值(10 × 10)。如果是十六進(jìn)制,則總數(shù)為256(16 × 16)。因此,它實(shí)際上就像rgb()一樣,我們?yōu)槊總€(gè)R/G/B通道指定一個(gè)介于0和255之間的值。

          還有個(gè)有趣的事實(shí)如果我們想包含一個(gè)alpha通道,我們可以傳遞一個(gè)八位十六進(jìn)制代碼:

          background: #FFFF0080;
          

          代碼效果圖:

          在本例中,我們指定80作為alpha通道,相當(dāng)于十進(jìn)制系統(tǒng)中的128。因此,這個(gè)盒子是50%不透明的。

          8位十六進(jìn)制代碼在現(xiàn)代瀏覽器中得到了廣泛應(yīng)用,全球支持率達(dá)到96%,IE瀏覽器不支持。

          HSL

          到目前為止,我們看到的兩種顏色格式都是基于相同基本思想的不同“包裝器”:傳遞紅/綠色/藍(lán)通道的特定值。

          但這并不是思考顏色的唯一方式!讓我們來看看一個(gè)完全不同的顏色格式:HSL。

          讓我們從顏色選擇器開始:

          這個(gè)顏色選擇器可能感覺更熟悉。它類似于圖形設(shè)計(jì)軟件中使用的圖形設(shè)計(jì)軟件,如Figma或Photoshop。

          此顏色格式采用3種不同的值:

          • H 色相:這是我們要用的顏色,有效值的范圍是0到360。我們以度為單位指定它,因?yàn)榭潭仁菆A形的(0度和360度表示相同的紅色色相)。
          • S 飽和度:有效值的范圍為0%到100%。在0%時(shí),顏色中沒有色,完全是灰度級(jí)的。在100%,顏色盡可能鮮艷。
          • L 亮度:顏色有多淺/多深?有效值的范圍為0%到100%。在0%時(shí),顏色是漆黑的。在100%時(shí),顏色為純白色。

          這往往是一個(gè)非常直觀的方式來思考顏色。我們沒有直接控制R/G/B光值,而是轉(zhuǎn)向了更高層次的抽象,這與人類通常對(duì)顏色的看法更接近。

          css中使用hsl:

          background: hsl(0deg 100% 50% / 0.5);
          

          現(xiàn)代色彩格式

          所以,我們到目前為止看到的所有顏色格式都已經(jīng)存在了很多很多年。HSL甚至早在Internet Explorer 9(2011年發(fā)布)中就支持了!

          最近我們?cè)贑SS中得到了一些新的顏色格式。它們很有吸引力。讓我們談?wù)勊麄儭?/span>

          Display P3

          這篇文章是關(guān)于顏色格式,我們用來指定顏色的語法。到目前為止,我們看到的所有真彩色格式 rgb()、十六進(jìn)制代碼和hsl() 都是由“標(biāo)準(zhǔn)RGB顏色空間”(通常縮寫為sRGB)所約束的。

          sRGB中有數(shù)百萬種可能的顏色,但它并沒有接近捕捉人眼能夠看到的全部顏色范圍。

          請(qǐng)看下面兩個(gè)紅色方塊:

          左邊的顏色是rgb(255 0 0)。它是sRGB顏色空間中最紅的紅色。然而,在右邊,我使用的是P3顏色空間。更紅了!(這兩個(gè)方塊看起來很有可能是一樣的。如果是這樣,這可能意味著您的顯示器或?yàn)g覽器不支持寬色域顏色格式)

          P3擴(kuò)展了標(biāo)準(zhǔn)的sRGB色彩空間,使我們能夠獲得更明亮,更鮮艷的色彩。如下圖所示:

          不幸的是,在CSS中,顏色空間與顏色格式相關(guān)聯(lián)。如果我選擇使用rgb()語法(或十六進(jìn)制代碼,或hsl()),我只能在sRGB顏色空間中指定顏色。

          因此,如果我們想使用P3顏色,我們需要使用不同的顏色格式。語法如下:

          .box {
            background: color(display-p3 1 0 0);
          }
          

          color()函數(shù)接受一個(gè)顏色空間,然后是一組R/G/B值。它使用0到1的十進(jìn)制值,而不是從0到255。但目前只有主流的瀏覽器對(duì)color()函數(shù)支持。

          LCH

          我們使用HSL顏色格式創(chuàng)建以下兩種顏色:

          正如我們所看到的,這兩種顏色都具有相同的50%的“亮度”值。但它們感覺不一樣輕,黃色的感覺比藍(lán)色的輕多了!

          HSL顏色格式是在數(shù)學(xué)/物理之后建模的。它沒有考慮到人類的感知。而且,事實(shí)證明,人類并不能非常準(zhǔn)確地感知顏色!

          LCH是一種顏色格式,旨在對(duì)人類感知一致。兩種顏色具有同等的“亮度”值應(yīng)該感覺同樣輕!

          例如,在LCH中,黃色和藍(lán)色在55%亮度下的樣子:

          LCH代表“亮度 色度 色調(diào)”。“色度”或多或少是“飽和度”的同義詞。它在概念上與HSL非常相似,但有兩個(gè)很大的區(qū)別:

          • 如上所述,它優(yōu)先考慮人類感知,因此具有相同“亮度”值的兩種顏色將感覺同樣亮。
          • 它不受任何特定顏色空間的約束。

          與我們看到的其他顏色格式不同,LCH不綁定到sRGB。它甚至沒有綁定到P3!它通過不具有色度上限來實(shí)現(xiàn)這一點(diǎn)。

          在HSL中,飽和度范圍從0%(無飽和)到100%(完全飽和)。這是可能的,因?yàn)槲覀冎牢覀冋務(wù)摰氖莝RGB顏色空間,一個(gè)有限的顏色調(diào)色板。

          但是LCH并沒有鏈接到特定的顏色空間,所以我們不知道飽和度上限在哪里。它不是靜態(tài)的:隨著顯示技術(shù)的不斷改進(jìn),我們可以預(yù)期顯示器將達(dá)到越來越寬的色域。LCH將自動(dòng)能夠通過調(diào)高色度來參考這些擴(kuò)展的顏色。

          background: lch(50% 120 20);
          

          瀏覽器支持情況:

          選擇正確的顏色格式

          文章的主要內(nèi)容已經(jīng)結(jié)束了,我們看到了許多不同的顏色格式。那么應(yīng)該在工作中真正使用哪一個(gè)呢?

          我建議使用HSL。至少在LCH獲得廣泛的瀏覽器支持之前。

          我知道很多開發(fā)者喜歡使用十六進(jìn)制代碼。它們簡(jiǎn)潔,易于在設(shè)計(jì)軟件和我們的代碼之間復(fù)制/粘貼,并且通用。但這些好處也伴隨著一些相當(dāng)大的權(quán)衡。

          即使你對(duì)十六進(jìn)制符號(hào)很熟悉,它仍然很難直觀破譯。問:#0F52B7是什么顏色?#F3E248怎么樣?

          HSL的奇妙之處在于它是直觀的。它與我們對(duì)顏色的看法密切相關(guān)。通過一些練習(xí),當(dāng)您看到hsl()值時(shí),您將能夠立即描繪任何顏色。

          這意味著我們可以很容易地調(diào)整值,在運(yùn)行中。我甚至不需要打開一個(gè)顏色選擇器。如果我希望我的顏色稍微暗一點(diǎn),我可以減少亮度百分比。如果我想讓它更生動(dòng)和激烈,我可以調(diào)高飽和度。

          當(dāng)我們將HSL與現(xiàn)代CSS特性相結(jié)合時(shí),它會(huì)變得更加強(qiáng)大。

          最后

          有興趣的可以看看原文,可以在線體驗(yàn)不同顏色格式是如何工作的。看完本文如果覺得有用,記得點(diǎn)個(gè)贊支持,收藏起來說不定哪天就用上啦~

          專注前端開發(fā),分享前端相關(guān)技術(shù)干貨,公眾號(hào):南城大前端(ID: nanchengfe)


          主站蜘蛛池模板: 丰满爆乳一区二区三区| 一区二区三区福利| 精品国产AV无码一区二区三区| 亚洲一区二区三区国产精品| 国产香蕉一区二区三区在线视频| 国产成人无码AV一区二区| 波多野结衣中文一区| 国产精品揄拍一区二区| 人妻激情偷乱视频一区二区三区 | 一区二区三区视频在线| 亚洲第一区精品日韩在线播放| 亚洲av无码一区二区三区观看 | 国产99久久精品一区二区| 无码精品人妻一区二区三区免费看 | 国产日本一区二区三区| 无码国产伦一区二区三区视频| 精品伦精品一区二区三区视频 | 亚洲日韩激情无码一区| 亚洲av无码天堂一区二区三区 | 91精品国产一区二区三区左线 | 亚洲欧洲专线一区| 2021国产精品视频一区| 亚洲综合无码一区二区痴汉 | 91一区二区三区| 自慰无码一区二区三区| 中文字幕乱码一区二区免费| 国产亚洲一区二区三区在线不卡| 欧洲精品码一区二区三区免费看| 国产在线第一区二区三区| 美女福利视频一区二区| 国产福利一区二区在线视频| 久久精品中文字幕一区| 中文字幕一精品亚洲无线一区| 精品成人av一区二区三区| 国产一区二区三区精品视频| 国精产品一区二区三区糖心| 亚洲国产日韩一区高清在线| 日韩一区二区视频| 高清无码一区二区在线观看吞精 | 日韩免费无码视频一区二区三区| 乱精品一区字幕二区|