整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML 簡介

          文本標記語言(英語:HyperText Markup Language,簡稱:HTML)是一種用于創建網頁的標準標記語言。HTML是一種基礎技術,常與CSS、JavaScript一起被眾多網站用于設計令人賞心悅目的網頁、網頁應用程序以及移動應用程序的用戶界面。網頁瀏覽器可以讀取HTML文件,并將其渲染成可視化網頁。HTML描述了一個網站的結構語義隨著線索的呈現,使之成為一種標記語言而非編程語言。

          HTML元素是構建網站的基石。HTML允許嵌入圖像與對象,并且可以用于創建交互式表單,它被用來結構化信息——例如標題、段落和列表等等,也可用來在一定程度上描述文檔的外觀和語義。HTML的語言形式為尖括號包圍的HTML元素(如<html>),瀏覽器使用HTML標簽和腳本來詮釋網頁內容,但不會將它們顯示在頁面上。

          HTML可以嵌入如JavaScript的腳本語言,它們會影響HTML網頁的行為。網頁瀏覽器也可以引用層疊樣式表(CSS)來定義文本和其它元素的外觀與布局。維護HTML和CSS標準的組織萬維網聯盟(W3C)鼓勵人們使用CSS替代一些用于表現的HTML元素。

          歷史

          W3C制作的早期HTML標志

          發展

          蒂姆·伯納斯-李

          1980年,物理學家蒂姆·伯納斯-李在歐洲核子研究中心(CERN)在承包工程期間,為使CERN的研究人員使用并共享文檔,他提出并創建原型系統ENQUIRE。1989年,伯納斯-李在一份備忘錄中提出一個基于互聯網的超文本系統。他規定HTML并在1990年底寫出瀏覽器和服務器軟件。同年,伯納斯-李與CERN的數據系統工程師羅伯特·卡里奧聯合為項目申請資助,但未被CERN正式批準。在他的個人筆記中伯納斯-李列舉“一些使用超文本的領域”,并把百科全書列為首位。

          HTML的首個公開描述出現于一個名為“HTML標簽”的文件中,由蒂姆·伯納斯-李于1991年底提及。它描述18個元素,包括HTML初始的、相對簡單的設計。除了超鏈接標簽外,其他設計都深受CERN內部一個以標準通用標記語言(SGML)為基礎的文件格式SGMLguid的影響。這些元素在HTML 4中仍有11個存在。

          伯納斯-李認為HTML是SGML的一個應用程序。1993年中期互聯網工程任務組(IETF)發布首個HTML規范的提案:“超文本標記語言(HTML)”互聯網草案,由伯納斯-李與丹·康納利(英語:Dan Connolly (computer scientist))撰寫。其中包括一個SGML文檔類型定義來定義語法。草案于6個月后過期,不過值得注意的是其對NCSA Mosaic瀏覽器自定義標簽從而將在線圖像嵌入的行為的認可,這反映IETF把標準立足于成功原型的理念。同樣,戴夫·拉格特(英語:Dave Raggett)在1993年末提出的與之競爭的互聯網草案“HTML+(超文本標記格式)”建議規范已經實現的功能,如表格與填寫表單。

          在HTML和HTML+的草案于1994年初到期后,IETF創建一個HTML工作組,并在1995年完成"HTML 2.0",這是第一個旨在成為對其后續實現標準的依據的HTML規范。

          在IETF的主持下,HTML標準的進一步發展因競爭利益而遭受停滯。自1996年起,HTML規范一直由萬維網聯盟(W3C)維護,并由商業軟件廠商出資。不過在2000年,HTML也成為國際標準(ISO/ IEC15445:2000)。HTML 4.01于1999年末發布,進一步的勘誤版本于2001年發布。2004年,網頁超文本應用技術工作小組(WHATWG)開始開發HTML5,并在2008年與W3C共同交付,2014年10月28日完成標準化。

          版本時間線

          1995年11月24日

          HTML 2.0作為IETF RFC 1866發布。追加RFC的附加功能:

          1995年11月25日:RFC 1867(基于表單的文件上傳)

          1996年5月:RFC 1942(表格)

          1996年8月:RFC 1980(客戶端圖像映射)

          1997年1月:RFC 2070(國際化)

          1997年1月14日

          HTML 3.2作為W3C推薦標準發布。這是首個完全由W3C開發并標準化的版本,因IETF于1996年9月12日關閉它的HTML工作組。

          最初代號為“威爾伯”(Wilbur),HTML 3.2完全去除數學公式,協調各種專有擴展,并采用網景設計的大多數視覺標記標簽。由于兩家公司達成了協議,網景的閃爍元素(英語:blink element)和微軟的滾動元素(英語:marquee element)被移除。HTML對數學公式的支持最后成為另外一種被稱為MathML的標準。

          1997年12月18日

          HTML 4.0作為W3C推薦標準發布。它提供三種變化:

          嚴格,過時的元素被禁止。

          過渡,過時的元素被允許。

          框架集,大多只與框架相關的元素被允許。

          最初代號“美洲獅”(Cougar), HTML 4.0采用許多特定瀏覽器的元素類型和屬性,并試圖淘汰網景的視覺標記功能,將其標記為不贊成使用。HTML 4是遵循ISO 8879 - SGML的SGML應用程序。

          1998年4月24日

          HTML 4.0進行微調,不增加版本號。

          1999年12月24日

          HTML 4.01作為W3C推薦標準發布。它同樣提供三種變化,最終勘誤版于2001年5月12日發布。

          2000年5月

          ISO/IEC 15445:2000("ISO HTML",基于HTML 4.01嚴格版)作為ISO/IEC國際標準發布。在ISO中這一標準位于ISO/IEC JTC 1/SC 34(英語:ISO/IEC JTC 1/SC 34)域(ISO/IEC聯合技術委員會1、小組委員會34 – 文檔描述與處理語言)。

          2014年10月28日

          HTML 5作為W3C推薦標準發布。

          草案時間線

          HTML5的Logo

          1991年10月

          HTML標簽,一個非正式CERN文件首次公開18個HTML標簽。

          1992年6月

          HTML DTD的首個非正式草案, 后續有七個修訂版(7月15日,8月6日,8月18日,11月17日,11月19日,11月20日,11月22日)。

          1992年11月

          HTML DTD 1.1(首個版本號,基于RCS修訂版,版本號從1.1開始而非1.0),非正式草案。

          1993年6月

          超文本標記語言由IETF IIIR工作小組作為互聯網草案(一個粗略的建議標準)。在被第二版代一個月后,IETF又發布6個草案,最終在RFC1866中發布HTML 2.0。

          1993年11月

          HTML+由IETF作為互聯網草案發布,是超文本標記語言草案的一個競爭性提案。它于1994年5月到期。

          1995年4月 (1995年3月編寫)

          HTML 3.0[33]被提議作為IETF的標準,但直到提案在五個月過期后(1995年9月28日)仍沒有進一步的行動。它包含許多拉格特HTML+提案的功能,如對表格的支持、圍繞數據的文本流和復雜的數學公式的顯示。W3C開始開發自己的Arena瀏覽器作為HTML 3和層疊樣式表的試驗臺(英語:Test bed),但HTML 3.0并沒有獲得成功。瀏覽器廠商,包括微軟和網景,選擇實現HTML3草案功能的不同子集并引入它們自己的插件(見瀏覽器大戰)。

          2008年1月

          HTML5由W3C作為工作草案(鏈接)發布。雖然HTML5的語法非常類似于SGML,但它已經放棄任何成為SGML應用程序的嘗試,除了一種替代的基于XML的HTML5序列,它已明確定義自己的“HTML”序列。

          2011年 HTML5 – 最終征求

          2011年5月,工作小組將HTML5推進至“最終征求”(Last Call)階段,邀請W3C社區內外人士以確認本規范的技術可靠性。W3C開發一套綜合性測試套件來實現完整規范的廣泛交互操作性,完整規范的目標日期為2014年。2011年1月,WHATWG將其“HTML5”活動標準重命名為“HTML”。W3C仍然繼續其發布HTML5的項目。

          2012年 HTML5 – 候選推薦

          2012年7月,WHATWG和W3C的工作產生一定程度的分離。W3C繼續HTML5規范工作,重點放在單一明確的標準上,這被WHATWG稱為“快照”。WHATWG組織則將HTML5作為一個“活動標準”(Living Standard)。活動標準的概念是從未完成但永遠保持更新與改進,可以添加新特性,但功能點不會被刪除。

          2012年12月,W3C指定HTML5作為候選推薦階段。 該階段的標準為“兩個100%完成,完全實現交互操作”。

          2014年 HTML5 – 提案推薦與推薦

          2014年9月,HTML5進入提案推薦階段。

          2014年10月28日,HTML5作為穩定W3C推薦標準發布,這意味著HTML5的標準化已經完成。

          XHTML版本

          XHTML是使用XML 1.0改寫自HTML 4.01的獨立語言。它不再被作為單獨標準開發。

          XHTML 1.0, 2000年1月26日作為W3C推薦標準發布。修訂版于2002年8月1日發布,它提供與HTML 4.0和4.01相同的三個變化,這些變化被重新在XML中制定。

          XHTML 1.1,基于XHTML 1.0 嚴格版,2001年5月31日 作為W3C推薦標準發布。修訂版可使用模塊化XHTML的模塊,2001年4月10日作為W3C推薦標準發布。

          XHTML 2.0為工作草案,但為支持HTML5與XHTML5的工作,此草案被放棄。 XHTML 2.0與XHTML 1.x不兼容,因此更確切的說這是一個XHTML風格的新語言而不是XHTML 1.x的更新。

          在HTML5草案中規定一個XHTML語法,稱為“XHTML5.1”。

          標記

          HTML標記包含標簽(及其屬性)、基于字符的數據類型、字符引用和實體引用等幾個關鍵部分。HTML標簽是最常見的,通常成對出現,比如<h1>與</h1>。這些成對出現的標簽中,第一個標簽是開始標簽,第二個標簽是結束標簽。兩個標簽之間為元素的內容,有些標簽沒有內容,為空元素,如<img>。

          HTML另一個重要組成部分為文檔類型聲明(英語:document type declaration),這會觸發標準模式渲染。

          以下是一個經典的Hello World程序的例子:

          <!DOCTYPE html>

          <html>

          <head>

          <title>This is a title</title>

          </head>

          <body>

          <p>Hello world!</p>

          </body>

          </html>

          <html>和</html>之間的文本描述網頁,<body>和</body>之間的文本為可視頁面內容。標記文本<title>This is a title</title>定義了瀏覽器的頁面標題。

          文檔標記類型<!DOCTYPE html>用于HTML5。 如果未進行聲明,瀏覽器會使用“怪異模式”進行渲染。

          元素

          HTML文檔由嵌套的HTML元素構成。它們用HTML標簽表示,包含于尖括號中,如<p>

          在一般情況下,一個元素由一對標簽表示:“開始標簽”<p>與“結束標簽”</p>。元素如果含有文本內容,就被放置在這些標簽之間。

          在開始與結束標簽之間也可以封裝另外的標簽,包括標簽與文本的混合。這些嵌套元素是父元素的子元素。

          開始標簽也可包含標簽屬性。這些屬性有諸如標識文檔區段、將樣式信息綁定到文檔演示和為一些如<img>等的標簽嵌入圖像、引用圖像來源等作用。

          一些元素如換行符<br>,不允許嵌入任何內容,無論是文字或其他標簽。這些元素只需一個單一的空標簽(類似于一個開始標簽),無需結束標簽。

          許多標簽是可選的,尤其是那些很常用的段落元素<p>的閉合端標簽。HTML瀏覽器或其他媒介可以從上下文識別出元素的閉合端以及由HTML標準所定義的結構規則。這些規則非常復雜,不是大多數HTML編碼人員可以完全理解的。

          因此,一個HTML元素的一般形式為:<tag attribute1="value1" attribute2="value2">''content''</tag>。一些HTML元素被定義為空元素,其形式為<tag attribute1="value1" attribute2="value2">。空元素不能封裝任何內容。例如<br>標簽或內聯標簽<img>。一個HTML元素的名稱即為標簽使用的名稱。注意,結束標簽的名稱前面有一個斜杠“/”,空元素不需要也不允許結束標簽。如果元素屬性未標明,則使用其默認值。

          例子

          HTML文檔的頁眉:<head>...</head>。標題被包含在頭部,例如:

          <head>

          <title>The Title</title>

          </head>

          標題:HTML標題由<h1>到<h6>六個標簽構成,字體由大到小遞減:

          <h1>Heading level 1</h1>

          <h2>Heading level 2</h2>

          <h3>Heading level 3</h3>

          <h4>Heading level 4</h4>

          <h5>Heading level 5</h5>

          <h6>Heading level 6</h6>

          段落:

          <p>第一段</p> <p>第二段</p>

          換行:<br>。<br>與<p>之間的差異是br換行但不改變頁面的語義結構,而p部分的頁面成段。

          <p>這是<br>一個<br>使用換行<br>段落</p>

          鏈接:使用<a>標簽來創建鏈接。href屬性包含鏈接的URL地址。

          <a >中文維基百科的連結!</a>

          注釋:

          <!-- This is a comment -->

          注釋有助于理解標記,但它不會在網頁上顯示。

          HTML中存在以下幾種類型的標記元素:

          用于文本的結構式標記

          例如,<h2>羽毛球</h2>將“羽毛球”定義為二級標題。結構式標記不指示任何特定的渲染,但大多數網頁瀏覽器都會采用元素格式的默認樣式。要在內容上實現進一步的風格可以使用層疊樣式表(CSS)。

          用于文本外觀的表現式標記,不論其目的

          例如,<b>粗體</b>表示視覺輸出設備應將文本“粗體”加粗,但如果設備無法做到這一點(如朗讀文本的聽覺設備),就不會發生什么現象。在這種情況下,<b>粗體</b>與''斜體''也可能有相同的視覺效果,但在本質上它們更加語義化。如同<strong>加強文字</strong>與<em>強調文字</em>的區別。為支持CSS的使用,大多數表現式標記在HTML 4.0規范中不再被推薦使用。

          超文本標記使文檔的一部分鏈接到其他文檔

          錨元素在文檔中創建超鏈接,其href屬性設置鏈接的目標URL。例如:HTML標記<a 渲染為超鏈接。要將圖片渲染為超鏈接,img元素要作為內容插入到a元素中:<a ><img src="image.gif" alt="說明文字" width="50" height="50" border="0"></a>。

          屬性

          大多數元素的屬性以“名稱-值”的形式成對出現,由“=”分離并寫在開始標簽元素名之后。值一般由單引號或雙引號包圍,有些值的內容包含特定字符,在HTML中可以去掉引號(XHTML不行)。不加引號的屬性值被認為是不安全的[58]。有些屬性無需成對出現,僅存在于開始標簽中即可影響元素[6],如img 元素的ismap 屬性。

          許多元素存在一些共通的屬性:

          id屬性為元素提供了在全文檔內的唯一標識。它用于識別元素,以便樣式表可以改變其表現屬性,腳本可以改變、顯示或刪除其內容或格式化。對于添加到頁面的URL,它為元素提供了一個全局唯一標識,通常為頁面的子章節。例如,ID "屬性"對于https://zh.wikipedia.org/wiki/HTML#屬性

          class屬性提供一種將類似元素分類的方式。常被用于語義化或格式化。例如,一個HTML文檔可指定類<class="標記">來表明所有具有這一類值的元素都從屬于文檔的主文本。格式化后,這樣的元素可能會聚集在一起,并作為頁面腳注而不會出現在HTML代碼中。類屬性也被用于微格式的語義化。類值也可進行多聲明。如<class="標記 重要">將元素同時放入標記與重要兩類中。

          style屬性可以將表現性質賦予一個特定元素。比起使用id或class 屬性從樣式表中選擇元素,“style”被認為是一個更好的做法,盡管有時這對一個簡單、專用或特別的樣式顯得太繁瑣。

          title屬性用于給元素一個附加的說明。 大多數瀏覽器中這一屬性顯示為工具提示(英語:Tooltip)。

          lang屬性用于識別元素內容的語言,它可能與文檔的主要語言不同。例如,在中文文檔中:

          <p>法語<span lang="fr">c'est la vie</span>在法國的應用很普遍,意為“這就是生活” 。<p>

          縮寫元素abbr可用于說明一些屬性:

          <abbr id="ID" class="術語" style="color:purple;" title="超文本標記語言">HTML</abbr>

          這個例子顯示為HTML; 在大多數瀏覽器中,光標指向縮寫時會顯示標題文字“超文本標記語言”。

          大多數元素采用與語言相關的屬性dir 來指定文字方向,如 "rtl"采用從右到左的文本,比如阿拉伯語、波斯語以及希伯來語。

          字符與實體引用

          參見:XML與HTML字符實體引用列表和Unicode與HTML

          在4.0版本中,HTML定義了一系列共252個字符實體引用和1,114,050個字元值參考。二者都支持單個字符通過簡單的標記寫入。文字字符與其對應的標記渲染的效果相同。

          用這種方式“轉義”字符的能力允許字符<與&(當分別被寫作<和&時)被理解為字符數據而不是標記。例如<通常為標簽的開頭,&通常為字符實體引用與數字字符引用的開頭;&或&或&將&作為元素的內容或屬性的值。雙引號字符"在不被用于屬性值的標示時必須轉義為"或"或";相等地,當于單引號字符'不被用于屬性值的標示時,也必須轉義為'或'(或HTML5與XHTML文檔中的')。

          如果文檔作者忽略了轉義這樣的字符,一些瀏覽器會嘗試通過上下文猜測他們的意圖。如果結果仍為無效標記,這會使其他瀏覽器或用戶代理難以訪問到該文檔,并使它們嘗試使用搜索和索引來解析該文檔。

          那些難以輸入或不在該文檔字符編碼中的字符也可通過轉義來實現。例如通常只在西歐或南美的鍵盤出現的重音符e(é),可以在HTML文檔中用作實體引用é 或數字引用é或é。 諸如UTF-8的Unicode字符編碼與所有的現代瀏覽器兼容并允許直接訪問全球書寫系統幾乎所有的字符 。

          數據類型

          HTML為元素內容定義了多種數據類型,如腳本數據、樣式表數據以及許多屬性值的類型,包括ID、名稱、URI、數字長度單位、語言、媒體描述符顏色、字符編碼、日期和時間等等。所有這些數據類型都是字符數據的特殊化。

          文檔類型聲明

          HTML文檔需要以文檔類型聲明(英語:document type declaration)(英語非正式說法“doctype”)開頭。在瀏覽器中,文檔類型聲明有助于確定渲染模式——特別是是否使用怪異模式。

          文檔類型聲明的初衷是通過基于文檔類型定義(DTD)的SGML工具來解析并驗證HTML文檔。

          HTML5未定義DTD,所以在HTML5中文檔類型聲明更為簡短:

          <!DOCTYPE html>

          HTML 4文檔類型聲明舉例:

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

          該聲明引用HTML 4.01“嚴格”版的DTD。基于SGML的驗證器可讀取DTD,正確解析這些文檔并執行驗證。在現代瀏覽器中,一個有效的文檔類型激活標準模式有別于怪異模式。

          另外,HTML 4.01提供過渡型與框架集型的DTD。過渡型涵蓋最廣,它可整合當前以及老舊或“過時”的標簽,而嚴格型DTD排除了過時的標簽。框架集擁有所有構建框架所需的標簽以及過渡型的標簽。

          語義化HTML

          語義化HTML是一種編寫HTML的方式,它強調編碼信息的含義在其格式(樣子)之上。HTML從創立之初就包括語義化標記,但也包括標識性標記如<font>、<i>和<center>標簽。也存在一些語義上中立的span與div標簽。自1990年代末層疊樣式表開始應用于大多數瀏覽器,網頁制作者就被鼓勵使用CSS以便呈現與內容分離。

          在2001年一次對語義網的討論中,蒂姆·伯納斯-李等人給出了一種的方法,使智能軟件“代理人”可能有一天會自動抓取網頁進行查找、過濾并將之前不相關的聯系起來。這種代理甚至在現在也不普遍,但一些Web 2.0、混搭和價格比較網站的想法可能會結束。這些網頁應用程序的混合與伯納斯-李的語義代理人的之間主要區別基于以下事實:當前的聚合與信息混合通常由網頁開發者設計,他們早已知道網絡位置和他們希望混搭、比較與結合的特定數據的API語義。

          網頁代理的一個重要類型是網絡爬蟲或搜索引擎蜘蛛。這些軟件代理依賴于它們發現的網頁的語義清晰度,因為它們一天要使用各種技術與算法來讀取和索引數百萬個網頁并給網頁用戶提供搜索工具,沒有這些萬維網的有效性就會大大降低。

          為使搜索引擎蜘蛛評估它們在HTML文檔中發現的文本片段的重要性,也為那些創建標記等混合的人與更多的自動化代理工具,HTML中的語義結構需要廣泛一致地應用從而將文本的含義呈現給瀏覽者。

          表示性標記在當前的HTML和XHTML推薦中不被鼓勵使用,HTML5中則被視為非法。

          好的語義化HTML也改善了網頁文檔的可訪問性。例如,當屏幕閱讀器或音頻瀏覽器可以正確判定一個文檔的結構時,視覺障礙用戶不會再因閱讀重復或無關的信息而浪費時間。

          分發

          HTML文檔分發的方法和其他計算機文件相同。不過,它們最常通過網頁服務器的超文本傳輸協議或電子郵件傳輸。

          HTTP

          萬維網主要由從服務器通過HTTP協議向瀏覽器發送的HTML文檔組成。但是,HTTP也可以被用于傳輸HTML之外的數據,例如圖像、聲音和其他內容。為使瀏覽器了解如何處理接收到的文檔,在傳輸文檔時必須同時傳遞文件類型。這種元數據包含MIME類型(對于HTML 4.01或更早版本是text/html,而對于XHTML 1.0或之后的版本是application/xhtml+xml),以及字符編碼(參見HTML字符編碼方式)。

          在現在的瀏覽器中,和HTML文檔一起發送的MIME類型影響文檔的解讀方式。和XHTML MIME類型一起發送的文檔被認為是良構的XML,而語法錯誤會導致瀏覽器無法呈現文檔。完全相同的文檔如果和HTML MIME類型一起發送,則可能被正常顯示,因為瀏覽器對HTML的語法檢查更加松懈些。

          W3C的推薦指出,遵循規定的推薦指引的XHTML 1.0文檔可標記二者任一的MIME類型。XHTML 1.1還指出,XHTML 1.1文檔應標有兩種MIME類型。

          HTML郵件

          大多數圖形電子郵件客戶端允許使用HTML的子集(經常界限不清)提供格式化和無法使用純文本的語義標記。這可能包括印刷信息,如彩色標題、強調和引用文本、內嵌圖片和圖表等。許多這樣的客戶包含一個編寫HTML電子郵件消息的圖形用戶界面編輯器和一個用于顯示的渲染引擎。在郵件中使用HTML受到了一些兼容性的批評,由于一些盲人或具有視覺障礙的人的訪問問題,這種方式有利于偽裝的釣魚攻擊。因其消息大小超過明文,所以它可混淆垃圾郵件過濾器。

          命名規則

          最常用的計算機文件擴展名為.html,通用縮寫為.htm。它起源于某些早期操作系統與文件系統,如DOS以及FAT數據結構的局限性,它將文件擴展名限制為3個字母。

          HTML應用程序

          HTML應用程序(HTA;文件擴展名".hta")是一個Microsoft Windows應用程序,它在瀏覽器中使用HTML和動態HTML提供應用程序圖形界面。正規HTML文件被限制在瀏覽器的安全模型中,只能分別通過網頁服務器和網頁對象與站點Cookie進行通信和操作。HTA作為完全受信任的應用程序運行,因此擁有更多的權限,如創建/編輯/刪除文件與注冊表項。因為它們在瀏覽器安全模式之外操作,所以HTA不能通過HTTP執行,必須下載(就像EXE文件)并在本地文件系統執行。

          所見即所得編輯器

          所見即所得編輯器使用圖形用戶界面(GUI)顯示HTML文檔,常常類似于文字處理器,所以用戶可以設計一切。編者面對的是文檔,而不是代碼,所以作者并不需要太多的HTML知識。這種所見即所得的編輯模式一直受到詬病,主要因為它生成的代碼質量不高;也有人主張將其改變至WYSIWYM模型(所見即所指)。

          流瀏覽器支持W3C的CSS Color 4標準,為web端增加了更豐富、更高清的色彩,但是這個新標準到底是什么?為何需要它?接下來,我們將為大家詳細解讀這個新標準,首先了解幾個基礎概念。色域(color gamut)是指顏色的可選范圍,而sRGB色域是目前web廣泛應用的色域標準,使用紅、綠、藍作為基礎色,色值范圍為0~255,三種基礎色互相混合起來可展示255*255*255種顏色。然而,現代web css使用的sRGB色域僅滿足基礎性的色彩需求,無法展示人類肉眼所能感知的顏色范圍,也遠低于高清展示的要求。

          以下是sRGB與其他幾種色域標準的色值范圍大小比較:ProPhoto RGB: 0 ~ 65535Adobe RGB: 0 ~ 65535SRGB: 0 ~ 255以下是sRGB與人類肉眼可感知的色域比較:NTSC(1953): 47% sRGBRec.709(1990): 35% sRGBNTSC(1976): 72% sRGBAdobe RGB(1998): 52% sRGBDCI-P3: 45% sRGBRec.2020: 75.8% sRGB色彩空間(color space)是一個基于某一色域標準下構建的空間數學模型,用來標記出色域中每個顏色的空間位置,各個顏色之間的關系等。例如在sRGB中,紅、綠、藍三種基礎色可設置為3個直線坐標軸,每種顏色便可標記為立方體中的一個點。

          在css中,我們使用rgb()方法來取色,參數為指定顏色在色彩空間中的坐標(R, G, B)。在新標準中,我們可以使用新的方法color()和相應語法,來展示更多的色域及色彩空間。color()方法可以使用多種顏色模型,包括sRGB、P3、ProPhoto RGB和Rec.2020等。例如,color(display-p3 0.5 1 0),表示在P3色域中使用亮度為0.5、飽和度為1、藍色為0的顏色。另外,我們還可以使用更簡單的語法color(display-p3 red),其中紅色可能是一個十六進制值或者是一個英文單詞。除此之外,新標準中還提供了一些輔助方法,例如lab()和lch()方法,用來表示CIELAB和CIELCH顏色空間中的顏色。

          新標準的出現將有助于web端展示更加真實、自然的色彩,使得網頁設計人員擁有更多的色彩選擇和創意空間,同時也能夠更加準確地展示企業形象和產品特色。然而,目前僅有最新版本的現代瀏覽器支持新標準,這也給廣大用戶帶來了困擾。但是我們相信,隨著新標準的逐步普及,更多的用戶將會享受到更加優質的視覺體驗。總之,CSS Color 4標準的發布是一個值得關注的新聞,它為web端的色彩展示提供了更多的可能性。我們期待著更多的瀏覽器廠商加入進來,共同推動這一標準的發展,讓web端的色彩展示變得更加高清、更加自然。高清色彩已經成為當今設計和顯示技術的熱門話題。隨著越來越多的人希望在屏幕上看到更真實、更豐富的色彩,像sRGB這樣的傳統色域標準已經不再足夠。在這種情況下,CSS Color 4標準為Web設計師和開發人員提供了更靈活、更準確的色彩管理工具,使他們能夠更好地控制和呈現不同色域標準下的顏色。

          在過去,我們常常使用rgb()、rgba()、hsl()、hwb()等方法來指定顏色,這些方法對應的是同一色域范圍,即sRGB。然而,sRGB只能顯示人類肉眼可感知的色彩中的30%,這意味著我們無法展示出更廣闊的色域所包含的更多顏色。這就好像在使用一臺90年代的電視機播放4K電影一樣,無法完全展現畫面的細節和色彩。為了應對這種情況,人們開始研究如何支持更廣的色域標準。例如,Display-P3和Rec2020都是更廣的色域標準,它們可以使用與sRGB不同的色彩空間描述。不同的色域標準可以使用不同的色彩空間來描述,也可以使用同一類的色彩空間表示。例如,sRGB可以使用rgb()、hsl()、hwb()等方法進行描述,而Display-P3和Rec2020色域都可以使用RGB色彩空間來描述,只是空間的邊界范圍有所不同。

          支持更廣色域標準的需求只會越來越多,雖然目前的網絡顯示設備很多還是sRGB標準,并不支持顯示更廣色域標準的色彩,但只是時間問題。為了應對這一趨勢,W3C的CSS Color 4標準為我們提供了新的方法color()和其他語法,可以更好地指定各種不同色域標準下的顏色,以及更好的色彩漸變展示。W3C的CSS Color 4標準定義了一系列新的方法和語法,以實現更準確、更靈活的色彩管理。例如,color()方法可以在不同的色域標準下指定顏色,同時也支持透明度和色彩空間轉換。此外,CSS Color 4標準還引入了新的色彩漸變語法,允許我們更好地控制各種顏色之間的漸變效果。這些新的方法和語法為Web設計師和開發人員提供了更多的工具和靈活性,以實現更好的色彩管理和呈現效果。最近,主流三大Web瀏覽器也都已支持了W3C的新標準。

          這意味著我們可以開始在我們的網站和應用程序中使用CSS Color 4標準中定義的新方法和語法,以實現更好的色彩呈現效果。雖然目前支持CSS Color 4標準的設備還比較有限,但隨著時間的推移,越來越多的設備將支持這一標準,使我們能夠更好地控制和管理不同色域標準下的顏色。總之,隨著色彩技術的不斷發展,支持更廣色域標準已經成為Web設計和開發的必然趨勢。W3C的CSS Color 4標準為我們提供了更靈活、更準確的色彩管理工具,使我們能夠更好地呈現不同色域標準下的顏色。我們期待著未來,當越來越多的設備和瀏覽器支持CSS Color 4標準時,我們將能夠展示更真實、更豐富的色彩,為用戶帶來更好的視覺體驗。你認為CSS Color 4標準的出現對Web設計和開發有何重要意義?你有沒有使用CSS Color 4標準中定義的新方法和語法?

          在未來,你認為Web顏色管理和呈現技術會有哪些變化和創新?顏色指定方式的演變顏色在網頁設計中是至關重要的,而如何指定顏色也是需要花費一定精力去思考的。從2000年開始,我們有多種方式可以指定顏色,包括hex色值(#rgb、#rrggbb)、rgb()、rgba()、或是一些特定顏色的字符(如white、pink等)。隨著時間的推移,各種瀏覽器陸續增加了對不同顏色指定方式的支持,包括hsl()、hwb()方法等。不同的指定方式對應著不同的色彩空間,但它們的色域都是一致的,即sRGB。HEX顏色指定方式HEX顏色指定方式通過使用十六進制的數字來分別表示R、G、B、A的值,指定顏色較為簡單。在HEX色值中,通常使用3位或是6位數字來指定顏色,如“#49b”表示為3位HEX色值,“#4499bb”則表示為6位HEX色值。

          在HEX色值中,若需要指定透明度,則可以使用4位或是8位數字來表示。其中,4位數字中,前3位表示R、G、B的值,最后一位表示透明度;8位數字中,前6位表示R、G、B的值,后面兩位表示透明度。例如,“#f9bf”表示完全不透明,“#ff99bbff”表示完全不透明,“#49b8”表示透明度為88%,“#4499bb88”表示透明度為88%。RGB顏色指定方式RGB顏色指定方式通過使用0~255的十進制數字,或是0%~100%的百分比來指明R、G、B,透明度A使用百分比或0~1的數字表示。在rgb()中,可以通過傳遞3個參數(即R、G、B)或是4個參數(即R、G、B、A)來指定顏色。在rgba()中,需要傳遞4個參數,其中第4個參數是透明度。例如,rgb(73, 153, 187)表示為不透明的顏色,rgba(73, 153, 187, 0.5)表示為透明度為50%的顏色。

          HSL顏色指定方式HSL顏色指定方式中,H表示色相(0~360°),S表示飽和度(0%~100%),L表示亮度(0%~100%)。與RGB顏色指定方式不同,HSL指定方式更加符合人類的感知習慣,且更加容易調整顏色的亮度和飽和度。在HSL顏色指定方式中,可以通過hsl()和hsla()方法來指定顏色,其中hsla()方法需要傳遞一個額外的參數,即透明度。HWB顏色指定方式HWB顏色指定方式通過指定顏色的色相、白度、黑度來確定顏色。在hwb()方法中,H表示色相(0~360°),W表示白度(0~100%),B表示黑度(0~100%)。與HSL相比,HWB的調整方式更加靈活,但對于一些應用場景來說還不是特別實用。

          總結隨著時間的推移,我們擁有了越來越多的方式來指定顏色,從最開始的hex色值,到后來的rgb()、rgba()、hsl()、hsla()、hwb()等,每一種顏色指定方式都有著自己的優缺點。在選擇顏色指定方式時,我們需要根據具體的需求來進行選擇。值得注意的是,雖然各種顏色指定方式對應著不同的色彩空間,但它們的色域都是一致的,即sRGB。未來,我們是否還會有新的顏色指定方式呢?在這個瞬息萬變的時代,我們期待著更加靈活、實用的顏色指定方式的出現。思考題:你覺得哪種顏色指定方式最實用?為什么?CSS顏色空間:RGB與HSL的比較CSS中定義顏色有兩種方式,分別是RGB和HSL。RGB是紅綠藍三原色的縮寫,是一種比較直觀的顏色空間,而HSL是一種基于色相、飽和度和亮度的顏色空間,更符合人類自然理解,無需了解紅綠藍基礎色是如何混合的。

          RGB顏色空間RGB顏色空間是一種將紅、綠、藍三種基礎色光按照不同的比例混合而成的顏色空間。在CSS中,我們可以使用三種類型的RGB顏色表示方式:十進制表示、百分比表示和不帶分隔符的十六進制表示。在CSS中,我們可以使用--classic、--modern和--percents定義RGB顏色,這三種方式分別是十進制表示、不帶分隔符的十六進制表示和百分比表示。在定義完RGB顏色之后,我們還可以通過在RGBA后面加上透明度來定義帶透明度的顏色,透明度可以使用百分比或小數表示。另外,如果我們需要定義一個顏色中的某個通道為空,可以使用none關鍵字表示,例如:--empty-channels:rgb(none none none)。HSL顏色空間HSL顏色空間是基于色相(Hue)、飽和度(Saturation)和亮度(Lightness)三個參數來描述顏色的。

          它更符合人類自然理解,無需了解紅綠藍基礎色是如何混合的。在CSS中,我們可以使用hsl()函數來定義顏色,其中的三個參數分別是色相、飽和度和亮度。色相表示顏色的基本色調,取值范圍為0deg~360deg,飽和度表示顏色的強度或純度,取值范圍為0%~100%,亮度表示顏色的亮度程度,取值范圍也是0%~100%。在定義完HSL顏色之后,我們還可以通過在HSLA后面加上透明度來定義帶透明度的顏色,透明度可以使用百分比或小數表示。總結RGB顏色空間和HSL顏色空間都有自己的特點和優勢,選擇哪一種顏色空間來定義顏色,需要根據實際情況來決定。如果需要精確地控制顏色的混合比例,或者想要使用十六進制表示方式來定義顏色,那么RGB顏色空間是一個不錯的選擇;而如果想要更加直觀地描述顏色,或者想要控制顏色的明暗程度而不是具體的RGB值,那么HSL顏色空間會更加合適。

          在實際應用中,我們可以根據具體情況來選擇使用RGB還是HSL顏色空間,并且可以根據需要定義帶透明度的顏色,或者將某個通道的值設為空。在使用HSL顏色空間時,我們需要注意色相的取值范圍為0deg~360deg,飽和度和亮度的取值范圍為0%~100%。最后,為了使網頁在不同的瀏覽器和設備上呈現相同的顏色,我們可以使用Web安全顏色,這些顏色是一些被廣泛支持的顏色,可以確保在不同的設備上呈現相同的效果。你更喜歡使用哪種顏色空間來定義顏色呢?對于顏色的選擇和搭配,你有什么心得和經驗?歡迎在評論中分享你的想法。有效的CSS HSL顏色CSS中的顏色表示方式有很多種,其中一種常用的方式是使用HSL(色相、飽和度、亮度)顏色模式。在CSS中,我們可以使用HSL顏色來設置元素的背景色、文本顏色等。然而,有時候我們需要對顏色進行一些特殊的處理,例如設置透明度或者使用無色相和飽和度的黑白色。

          本文將介紹一些有效的CSS HSL顏色用法。傳統風格的HSL顏色首先,讓我們來看看傳統風格的HSL顏色。在CSS中,我們可以使用--classic來定義一個傳統風格的HSL顏色,具體的色相、飽和度和亮度的取值可以根據實際需要進行調整。例如,--classic:hsl(200deg, 50%, 50%); 表示色相為200度,飽和度為50%,亮度為50%的HSL顏色。這種方式常用于傳統風格的網頁設計中,給人一種穩重、典雅的感覺。現代風格的HSL顏色除了傳統風格的HSL顏色,我們還可以使用現代風格的HSL顏色。與傳統風格相比,現代風格的HSL顏色更加鮮艷、活潑。在CSS中,我們可以使用--modern來定義一個現代風格的HSL顏色,同樣可以根據實際需要調整色相、飽和度和亮度的取值。

          例如,--modern:hsl(200 50% 50%); 表示色相為200度,飽和度為50%,亮度為50%的HSL顏色。這種方式常用于現代風格的網頁設計中,給人一種時尚、年輕的感覺。帶透明度的HSL顏色除了設置顏色的基本屬性之外,有時候我們還需要設置顏色的透明度。在CSS中,我們可以使用HSLA(色相、飽和度、亮度、透明度)顏色模式來實現這一需求。HSLA顏色模式與HSL顏色模式非常相似,只是多了一個透明度的參數。我們可以使用百分比或者小數來表示透明度。例如,--classic-with-opacity-percent:hsla(200deg, 50%, 50%, 50%); 表示色相為200度,飽和度為50%,亮度為50%,透明度為50%的HSLA顏色。

          我們還可以使用小數來表示透明度,例如,--classic-with-opacity-decimal:hsla(200deg, 50%, 50%, .5); 表示透明度為0.5的HSLA顏色。通過調整透明度,我們可以實現更多樣化的顏色效果。帶透明度的現代風格HSL顏色除了傳統風格的HSL顏色和帶透明度的HSL顏色,我們還可以將現代風格的HSL顏色與透明度結合使用。在CSS中,我們可以使用--modern-with-opacity-percent:hsl(200 50% 50% / 50%); 或者--modern-with-opacity-decimal:hsl(200 50% 50% / .5); 來定義帶透明度的現代風格HSL顏色。這種方式可以讓我們在保持現代風格的同時,實現更多樣化的顏色效果。

          無色相和飽和度的黑白色除了常規的彩色HSL顏色,我們還可以使用HSL顏色模式來表示無色相和飽和度的黑白色。在CSS中,我們可以使用--empty-channels-white來定義一個白色,使用--empty-channels-black來定義一個黑色。這兩種顏色的特點是色相和飽和度均為"none",只有亮度參數。例如,--empty-channels-white:hsl(none none 100%); 表示白色,--empty-channels-black:hsl(none none 0%); 表示黑色。這種方式常用于一些特殊的設計需求,例如在網頁中使用黑白照片。總結本文介紹了一些有效的CSS HSL顏色用法。我們可以根據實際需要,選擇傳統風格的HSL顏色或者現代風格的HSL顏色,也可以使用HSLA顏色模式來設置顏色的透明度。

          此外,我們還可以使用HSL顏色模式來表示無色相和飽和度的黑白色。通過靈活運用這些顏色表達方式,我們可以實現更多樣化、個性化的網頁設計效果。你喜歡使用哪種CSS HSL顏色呢?歡迎在評論中分享你的想法!新CSS顏色方法:HWB和Color()CSS提供了許多用于設置顏色的方法,其中最常用的是RGB和十六進制。但是,最近出現了兩種新的方法來設置顏色:HWB和Color()。HWB方法HWB代表色相、白度和黑度。它類似于HSL(色相、飽和度和亮度),但具有一些區別。HWB中的色相表示顏色在圓形色環上的角度,而不是在圓錐體上的坐標。白度和黑度表示色彩中白色和黑色的比例。

          下面是一個示例,展示了如何使用HWB方法創建一些現代顏色:.valid-css-hwb-colors{ --modern:hwb(200deg 25% 25%); --modern2:hwb(200 25% 25%);}在這個例子中,我們使用hwb()函數創建兩個類似的顏色。注意,我們可以使用度數或不帶度數的數字表示色相。我們還可以在HWB顏色中設置不透明度:.valid-css-hwb-colors{ --modern-with-opacity-percent:hwb(200 25% 25% / 50%); --modern-with-opacity-decimal:hwb(200 25% 25% / .5);}在這個例子中,我們分別使用50%和0.5作為不透明度值。我們可以使用百分比或小數來設置不透明度。

          最后,我們可以使用HWB方法創建純黑色和純白色,這兩種顏色沒有飽和度或色相:.valid-css-hwb-colors{ /* 無色相和飽和度,僅用亮度可表示黑白色 */ --empty-channels-white:hwb(none 100% none); --empty-channels-black:hwb(none none 100%);}在這個例子中,我們使用none作為色相值。這表示黑色和白色沒有色相,只有亮度。Color()方法Color()方法類似于RGB方法,使用R、G、B三個直線軸上的數值來指明顏色。但是,Color()方法的第一個參數可以接收除sRGB以外的其他色域下的顏色空間標識符,且R、G、B的值僅支持0~1或0%~100%。

          下面是一個示例,展示了如何使用Color()方法來創建不同顏色空間中的顏色:.valid-css-color-function-colors { --srgb: color(srgb 1 1 1); --srgb-linear: color(srgb-linear 100% 100% 100% / 50%); --display-p3: color(display-p3 1 1 1); --rec2020: color(rec2020 0 0 0); --a98-rgb: color(a98-rgb 1 1 1 / 25%); --prophoto: color(prophoto-rgb 0% 0% 0%); --xyz: color(xyz 1 1 1);}在這個例子中,我們創建了七種不同的顏色。

          注意,我們可以使用不同的顏色空間標識符來創建這些顏色。結論HWB和Color()方法為CSS提供了更多的顏色選項。使用這些方法,我們可以創建不同的顏色,這些方法非常有用,特別是在設計網站時。不同的顏色空間提供了不同的顏色選項,可以使我們的設計更加多樣化和創新。我們期待看到更多的CSS屬性和方法在未來的CSS版本中的出現。你使用過HWB和Color()方法嗎?你認為它們有用嗎?請在下面的評論中分享你的想法。本文介紹了關于CSS新版本中color()方法的定義和使用,該方法可以描述不同色彩空間下的顏色及其透明度。參數colorspace指定使用哪種色彩空間,可選值包括srgb、srgb-linear、display-p3等。參數c1、c2、c3對應不同色彩空間下的各參數值,可用number、百分比或none表示。參數A為可選項,表示顏色的透明度。

          其中,在sRGB色彩空間中,不再支持0~255取值,而是改為0~1范圍。在Linear sRGB色彩空間中,顏色的取值范圍更廣,可用負數和大于1的數值表示,但需要注意使用時的轉換關系。在CSS新版本中,color()方法的使用更加靈活,可以描述不同色彩空間下的顏色及其透明度。在定義時,需要指定參數colorspace,可根據需要選擇不同的色彩空間。同時,參數c1、c2、c3和A也需要根據色彩空間的不同而有所調整,具體參數值可參考各色彩空間的描述。例如,在sRGB色彩空間中,需要將顏色的取值范圍從0~255改為0~1,可以使用number或百分比來表示。而在Linear sRGB色彩空間中,顏色的取值范圍更廣,可以用負數和大于1的數值表示。在使用時,需要注意轉換關系,避免出現誤差。除了描述顏色外,color()方法還支持描述透明度。

          參數A為可選項,可以用number、百分比或none表示。如果不指定透明度,則默認為1,即完全不透明。使用時,可以將顏色和透明度組合在一起,例如color(srgb 34% 58% 73% / 50%)表示顏色為sRGB色彩空間下的34%、58%、73%的顏色,透明度為50%。這種方式更加直觀,可幫助開發者快速定義所需的顏色和透明度。需要注意的是,當參數c1、c2、c3或A為none時,表示對應的顏色通道為空,即為黑色。例如,color(srgb none none none)和color(srgb)都表示為黑色。在實際使用中,需要根據需要來選擇正確的參數值,避免產生誤解。總之,color()方法在CSS新版本中的定義和使用更加靈活,可以描述不同色彩空間下的顏色及其透明度。在使用時,需要根據需要選擇正確的參數值,避免產生誤解。線性sRGB和sRGB是兩種不同的色彩空間。

          sRGB使用了一個伽馬曲線函數進行校正,使得顏色的變化對人眼的感知更加適應,即對明暗的感知是非線性的;而線性sRGB的顏色變化是線性的。在明暗從0到1漸變時,這兩種色彩空間的實際漸變走向是不同的。除了sRGB和線性sRGB之外,還有其他的色彩空間標準,例如Display P3和Rec2020。Display P3最早由蘋果公司推行,現在已成為HDR顯示的基礎標準。它能顯示的顏色比sRGB多50%。而Rec2020的色域更廣,可以用來顯示4K甚至8K的影像。然而,目前支持Rec2020標準的終端顯示器還很少。這些色域標準都是使用RGB來描述顏色。在CSS中,可以使用srgb-linear函數來表示線性sRGB的顏色。例如,通過設置不同的百分比或小數值,可以實現明暗漸變的效果。同時,還可以添加不透明度,通過設置透明度的百分比或小數值,來改變顏色的透明度。

          如果色值為none或為空,表示黑色。總之,線性sRGB和sRGB是不同的色彩空間,它們在顏色變化上有著不同的特性。此外,還有其他色域標準如Display P3和Rec2020,它們分別適用于不同的顯示需求。了解這些色域標準可以幫助我們更好地理解和應用顏色。在CSS中,我們可以使用srgb-linear函數來表示線性sRGB的顏色,并通過調整百分比或小數值來實現明暗漸變。但需要注意的是,目前支持Rec2020標準的顯示器還不常見,因此在選擇色彩空間時需要根據具體需求和設備的支持情況進行考慮。作為編輯,我認為了解不同的色彩空間標準對于設計和顯示領域的專業人士來說非常重要。選擇適合的色彩空間可以幫助我們呈現更準確、更鮮明的顏色效果。同時,對于普通用戶來說,了解色彩空間標準也可以幫助他們更好地理解和欣賞不同顯示設備的色彩表現。

          因此,我建議在相關的設計和技術教育中,應該加強對色彩空間的介紹和應用。你認為應該如何提高人們對色彩空間的認識和理解?你對不同色彩空間標準有什么看法和經驗?歡迎在評論中分享你的想法。如何正確使用CSS顏色空間CSS顏色空間是一個非常有用的工具,它可以幫助我們更好地管理和控制我們的網站和應用程序中的顏色。在CSS中,顏色空間用于描述顏色的值。CSS定義了幾種顏色空間,包括RGB,HSL和Lab等。最近,CSS添加了兩個新的顏色空間:Display-P3和Rec2020。這兩種顏色空間都是廣泛用于視頻和圖像的標準。但是,我們該如何正確地使用它們呢?Display-P3和Rec2020的介紹Display-P3和Rec2020是兩個用于描述顏色空間的標準。Display-P3是一種廣泛應用于iOS設備和Mac電腦的顏色空間標準。

          它是一種更廣泛的顏色空間,可以提供更多的顏色選項,從而更好地呈現圖像和視頻。另一方面,Rec2020是一種廣泛應用于廣播和電影制作的顏色空間標準。它是一種更大的顏色空間,可以提供更廣泛的顏色范圍,因此可以提供更好的圖像和視頻質量。如何在CSS中使用Display-P3和Rec2020顏色空間要在CSS中使用Display-P3和Rec2020顏色空間,您需要使用CSS的color()函數。該函數允許您指定顏色值的類型,包括RGB,HSL,Lab,Display-P3和Rec2020等。

          以下是使用Display-P3和Rec2020顏色空間的示例:.valid-css-display-p3-colors{ --percents:color(display-p3 34% 58% 73%); --decimals:color(display-p3 .34 .58 .73); --percent-opacity:color(display-p3 34% 58% 73% / 50%); --decimal-opacity:color(display-p3 .34 .58 .73 / .5); /* 無色度色相,展示為黑色 */ --empty-channels-black:color(display-p3 none none none); --empty-channels-black2:color(display-p3);}.vali

          d-css-rec2020-colors { --percents: color(rec2020 34% 58% 73%); --decimals: color(rec2020 .34 .58 .73); --percent-opacity: color(rec2020 34% 58% 73% / 50%); --decimal-opacity: color(rec2020 .34 .58 .73 / .5); /* 無色度色相,展示為黑色 */ --empty-channels-black: color(rec2020 none none none); --empty-channels-black2: color(rec2020);}如上所示,您可以使用color()函數,并將其設置為display-p3或rec2020來指定顏色空間。

          接下來,您可以像使用其他CSS顏色一樣指定顏色的值。在使用Display-P3和Rec2020顏色空間時需要注意的問題雖然使用Display-P3和Rec2020顏色空間可以提供更好的顏色選項和視頻質量,但在使用時也需要注意一些問題。首先,不是所有瀏覽器都支持Display-P3和Rec2020顏色空間。因此,在使用這些顏色空間時,請確保您的目標受眾可以支持這些顏色空間。否則,您的網站或應用程序可能會顯示不正確的顏色。其次,如果您的目標受眾支持Display-P3和Rec2020顏色空間,則您需要確保您的圖像和視頻也使用這些顏色空間。否則,它們可能會顯示不正確的顏色。最后,當使用Display-P3和Rec2020顏色空間時,請注意它們相對于其他顏色空間的亮度和對比度。Display-P3和Rec2020顏色空間可能會影響您的圖像和視頻的亮度和對比度。

          結論使用Display-P3和Rec2020顏色空間可以提供更好的顏色選項和視頻質量,但在使用時需要注意一些問題。請確保您的目標受眾支持這些顏色空間,并確保您的圖像和視頻也使用這些顏色空間。如果您需要更好的圖像和視頻質量,請考慮使用這些顏色空間。色彩是人類視覺中不可或缺的一部分,但是基于RGB標準的色彩空間無法完全描述人類視覺所能感知到的所有顏色。相比之下,基于CIE標準的色彩空間可以更好地覆蓋人類視覺所能感知到的所有顏色。CSS Color 4新標準新增了對于CIE標準色域的支持,下面將介紹基于CIE的四種取色新方法:lab()、lch()、oklab()、oklch()。首先,讓我們來看看lab()方法。lab()方法描述的是基于CIE標準的色彩空間中的顏色,能夠覆蓋人眼所能看到的全色域。與基于RGB來描述色彩的維度不同,lab使用的維度分別為L、A、B。

          其中L代表亮度,取值范圍為0~100或0%~100%。A代表紅-綠兩個色軸之一,取值范圍均為-125~125或-100%~100%。當A為正值時,更偏紅色;為負值時,更偏綠。B代表藍-黃兩個色軸之一,取值范圍均為-125~125或-100%~100%。當值為正時,更偏黃;為負時,更偏藍。接下來是lch()方法。lch()方法同樣是基于CIE標準的色彩空間,其中L代表亮度,取值范圍為0~100或0%~100%。C代表色度,即顏色的強度或純度,取值范圍為0~100或0%~100%。H代表色相,即顏色在色輪上的位置,取值范圍為0~360度或0~1弧度。oklab()方法是一種基于CIE標準的色彩空間,它的優勢在于它可以更好地處理亮度、飽和度和對比度。它使用的維度與lab()方法相同,即L、A、B。最后,是oklch()方法。

          oklch()方法同樣是基于CIE標準的色彩空間,它使用的維度與lch()方法相同,即L、C、H。與lch()方法相比,它可以更好地處理亮度、飽和度和對比度。雖然這四種取色方法都是基于CIE標準的色彩空間,但它們各自有著不同的優勢,可以根據具體需求進行選擇。總之,基于CIE標準的色彩空間可以更好地覆蓋人類視覺所能感知到的所有顏色,而lab()、lch()、oklab()、oklch()等取色新方法可以更好地描述和處理不同類型的顏色。在實際應用中,可以根據需求選擇最合適的方法來取色。你認為基于CIE標準的色彩空間和這些取色新方法對于色彩呈現有哪些創新和改進?在你的工作或學習中,你有使用過這些新方法嗎?歡迎在評論區分享你的經驗和看法。編輯:通過CSS顏色的新特性實現更加精確的顏色控制隨著CSS顏色的新特性的加入,我們可以更加精確地控制顏色的表現效果。

          本文將介紹一些利用新特性實現顏色控制的方法。CSS顏色的新特性CSS的新特性中,我們可以使用lch()函數來定義顏色變量。這個函數使用的維度分別是亮度(L)、純度(C)和色相(H),這個新特性提供了更加精確的顏色控制。利用lab()函數實現顏色控制在CSS中,我們可以使用lab()函數來實現顏色控制。

          例如,我們可以定義一個名為valid-css-lab-colors的類,并在其中定義各種顏色變量,如下所示:```css.valid-css-lab-colors{ --percent-and-degrees:lab(58% -16 -30); --minimal:lab(58 -16 -30); --percent-opacity:lab(58% -16 -30 / 50%); --decimal-opacity:lab(58% -16 -30 / .5); /* 后兩個參數為none是可表示純灰度 */ --empty-channels-white:lab(100 none none); --empty-channels-black:lab(none none none);}```使用這些定義好的變量,我們可以在CSS代碼中直接調用它們。

          這樣,我們就可以更加方便地控制顏色的表現效果了。總結通過CSS顏色的新特性,我們可以更加精確地控制顏色的表現效果。利用lab()函數定義顏色變量,可以讓我們更加方便地控制各種顏色的表現效果。我們相信,在今后的Web開發中,更加精確的顏色控制一定可以為我們的工作帶來更多的便利和效率。思考題:你覺得CSS的新特性對于Web開發者來說有哪些好處?在你的Web開發工作中,你有沒有使用到這些新特性?歡迎在評論區留言分享你的看法。CSS顏色空間新增支持LCH和OKLabCSS中新增支持LCH和OKLab顏色空間,這些新增的顏色函數提供了更準確的顏色處理,也更好地支持漸變優化。LCH顏色空間是由Luminance、Chroma和Hue三個維度組成的顏色空間,比HSL和HSV更直觀地描述了顏色的亮度、飽和度和色相。

          而OKLab是校正版的LAB顏色空間,它消除了色相偏移,提供更加準確的顏色轉換和圖像處理。

          下面列出了一些有效的CSS LCH和OKLab顏色的示例:使用LCH顏色:.valid-css-lch-colors{ --percent-and-degrees:lch(58% 32 241deg); --just-the-degrees:lch(58 32 241deg); --minimal:lch(58 32 241); --percent-opacity:lch(58% 32 241 / 50%); --decimal-opacity:lch(58% 32 241 / .5); --empty-channels-white:lch(100 none none); --empty-channels-black:lch(none none none);}使用OKLab顏色:.valid-css-oklab-colors{ --perc

          ent-and-degrees:oklab(64% -.1 -.1); --minimal:oklab(64 -.1 -.1); --percent-opacity:oklab(64% -.1 -.1 / 50%); --decimal-opacity:oklab(64% -.1 -.1 / .5); --empty-channels-white:oklab(100 none none); --empty-channels-black:oklab(none none none);}這些新增的CSS顏色函數為開發者提供了更多的顏色處理選項,更好地支持漸變優化和圖像處理。

          "OKLCH: The Updated Color Model for Precise Color Selection"Have you ever struggled to find the perfect color for your design or artwork With the advancement of technology, new color models have been developed to provide more precise and flexible color selection options. One such model is OKLCH, which is an improved version of LCH. Similar to HSL, OKLCH allows you to choose a hue from a color wh

          eel and adjust the brightness and saturation to achieve the desired color. In this article, we will explore the features of OKLCH and how it can enhance your color selection process.OKLCH, also known as the Oklab color model, is a perceptually uniform color space that aims to mimic how humans perceive color. Created by Bj?

          rn Ottosson, OKLCH offers a more accurate representation of color compared to traditional color models like RGB and CMYK. But what sets OKLCH apart is its intuitive color selection logic, which is similar to HSL. By selecting an angle on a circular color wheel, you can easily choose the desired hue. Then, by adjusting the brightness and saturation, you can fine-tune the color to your liking.Unli

          ke traditional color models, OKLCH provides a more simplified way of adjusting color. In HSL, you have to manipulate the hue, saturation, and lightness separately. But in OKLCH, the saturation and purity can be considered equivalent, with the difference lying in how the adjustments are made. Typically, the adjustments of purity and brightness are done simultaneously to prevent the purity from exce

          eding the desired color range. This synchronization ensures that the resulting color remains within the target color gamut.To illustrate the application of OKLCH, there is a color picker tool available that allows you to experience its capabilities. With this tool, you can input the desired values for percentage, decimal, opacity, and channels. For example, you can try out values like OKLCH(64%

          .1 233deg), OKLCH(64 .1 233deg), OKLCH(64 .1 233), OKLCH(64% .1 233 / 50%), OKLCH(64% .1 233 / .5), OKLCH(100 none none), and OKLCH(none none none). These examples showcase the flexibility and versatility of OKLCH in color selection.In addition to the improved color selection methods, the new color standard also introduces a color mixing function. This function allows you to blend colors from di

          fferent color spaces and create new color variations. For instance, you can use the color-mix() function to combine LCH colors like plum and pink. By specifying the color space (in this case, LCH) and the desired percentages, you can achieve the desired blend. Similarly, you can use the color-mix() function with other color spaces like sRGB and HSL to create unique color combinations.To further

          demonstrate the color mixing capability, let's take a look at some examples. Using the color-mix() function with LCH colors, you can create blends such as color-mix(in LCH, plum, pink) or color-mix(in LCH, plum 40%, pink). Alternatively, you can mix colors using different color spaces, such as color-mix(in sRGB, #34c9eb 20%, white) or color-mix(in HSL longer hue, HSL(120 100% 50%) 20%, white). The

          se examples highlight the versatility of the color-mix() function in generating various color combinations.In conclusion, the OKLCH color model is a powerful tool for precise color selection and blending. By incorporating the intuitive logic of HSL and the improved accuracy of LCH, OKLCH offers a more user-friendly and visually appealing approach to choosing colors. With the added feature of the

          color-mix() function, you can now easily create unique color blends with different color spaces. Whether you are a graphic designer, artist, or simply someone who appreciates the beauty of colors, OKLCH can greatly enhance your creative process. Try it out and unleash your imagination with the endless possibilities of OKLCH!What are your thoughts on the OKLCH color model Have you tried it out i

          n your design projects How do you think it compares to other color models Share your experiences and insights in the comments below!如何使用高清色彩:優雅降級和漸進增強隨著技術的不斷發展,色彩在我們的網頁設計中也變得越來越重要。高清色彩憑借其更廣的色域和更高的色彩精度,為我們呈現更加真實、生動的色彩,為視覺體驗提供了更多的可能性。本文將介紹高清色彩的基本概念及其在網頁設計中的應用方法。一、高清色彩的基本概念高清色彩是指比傳統sRGB色彩更寬廣的色域,以及更高的色彩精度。在sRGB色域內,我們只能使用有限的顏色來呈現圖像。而在高清色彩下,我們可以使用更多的顏色來呈現圖像,從而使圖像更加真實、生動。

          在CSS中,我們可以使用多種色彩空間來定義顏色,包括sRGB、sRGB線性、Lab、OkLab、XYZ、XYZ-D50、XYZ-D65、HSL、HWB、LCH、或OkLCH。在使用高清色彩時,我們可以選擇合適的色彩空間來定義顏色。二、優雅降級當我們使用一項新的語法時,我們通常會有兩種策略:優雅降級和漸進增強。優雅降級指的是在同時使用新舊語法的情況下,讓瀏覽器自動判斷展示哪種語法。這種實施起來比較簡單,只需要同時使用新舊語法即可。例如,在使用高清色彩時,我們可以同時使用sRGB和sRGB線性兩種語法來定義顏色:color: red; /* 這里使用傳統的sRGB語法 */color: color(display-p3 1 0 0); /* 這里使用新的sRGB線性語法 */如果瀏覽器不支持sRGB線性語法,則會只解析第一行;如果瀏覽器支持,則會最終使用第二行。

          這樣,我們就可以優雅地降級處理,確保無論用戶使用什么瀏覽器,都能正確顯示顏色。三、漸進增強除了優雅降級,我們還可以使用漸進增強的方法來使用高清色彩。在使用漸進增強的方法時,我們首先判斷當前瀏覽器是否支持新的色域標準,并在條件的情況下提供新的色值。這可以通過@supports和@media來實現。例如,我們可以使用@supports來判斷當前瀏覽器是否支持sRGB線性語法:@supports (color: color(display-p3 1 0 0)) { .box { color: color(display-p3 1 0 0); }}在這個例子中,我們使用@supports來判斷瀏覽器是否支持sRGB線性語法,如果支持,則給.box元素設置sRGB線性顏色;如果不支持,則不作處理。

          除了@supports,我們還可以使用@media來判斷瀏覽器是否支持高清色彩。具體來說,我們可以使用色域媒體查詢來判斷當前硬件設備是否支持高清、高對比度、高色彩精度。但需要注意的是,這種方法判斷的比較籠統,并不能準確判斷瀏覽器是否支持新色域和色彩空間。四、總結高清色彩為我們的網頁設計提供了更加豐富的色彩表現力,但在使用高清色彩時,我們需要注意瀏覽器的兼容性問題。為了讓所有用戶都能正確地看到顏色,我們可以使用優雅降級和漸進增強兩種方法來處理。優雅降級的方法比較簡單,適合處理一些簡單的場景;而漸進增強則更加靈活,適合處理一些復雜的場景。在實際使用中,我們可以根據具體情況選擇合適的方法來使用高清色彩。你認為在網頁設計中,高清色彩的使用有哪些注意事項呢?歡迎在評論區留言分享你的看法。

          文章標題:探索高動態范圍顏色和廣色域在CSS中的應用段落1:引入主題,介紹高動態范圍顏色和廣色域的概念,并提出問題。現代設備的顯示技術不斷進步,給我們帶來了更豐富、更真實的視覺體驗。其中,高動態范圍顏色和廣色域技術在提升圖像質量方面起到了重要作用。那么,在CSS中如何應用這兩種技術呢?本文將探索高動態范圍顏色和廣色域在CSS中的應用,帶您領略更精彩的視覺效果。段落2:介紹在CSS中使用媒體查詢判斷設備是否支持高動態范圍顏色。在CSS中,我們可以使用媒體查詢來判斷設備是否支持高動態范圍顏色。通過@media規則和dynamic-range屬性,我們可以根據設備的色域來選擇合適的顏色。例如,當設備支持高動態范圍顏色時,我們可以使用display-p3顏色來呈現更豐富的色彩。通過這種方式,我們可以確保在支持高動態范圍顏色的設備上獲得更好的視覺效果。

          段落3:介紹在CSS中使用媒體查詢判斷設備是否支持廣色域。除了判斷設備是否支持高動態范圍顏色,我們還可以使用媒體查詢來判斷設備是否支持廣色域。通過@media規則和color-gamut屬性,我們可以根據設備的色域來選擇合適的顏色。例如,當設備支持Display P3色域時,我們可以使用相應的顏色來呈現更廣闊的色彩范圍。這種技術可以讓我們的網頁在支持廣色域的設備上展現出更加絢麗的色彩。段落4:介紹在JavaScript中使用window.matchMedia()方法進行媒體查詢。除了在CSS中使用媒體查詢,我們還可以在JavaScript中使用window.matchMedia()方法進行媒體查詢。通過調用這個方法,并傳入相應的媒體查詢條件,我們可以判斷設備是否支持高動態范圍顏色和廣色域。

          例如,我們可以通過判斷window.matchMedia('(dynamic-range: high)').matches的返回值來確定設備是否支持高動態范圍顏色。這種方法可以讓我們在JavaScript中動態地根據設備的特性調整網頁的呈現方式。段落5:總結全文,提出個人觀點和建議,并引導讀者提出評論。總之,高動態范圍顏色和廣色域技術在提升網頁圖像質量方面具有巨大潛力。在CSS中,我們可以通過媒體查詢來判斷設備是否支持這兩種技術,并選擇合適的顏色呈現方式。同時,在JavaScript中使用window.matchMedia()方法也可以實現相同的效果。未來,隨著設備技術的不斷發展,我們可以期待更多使用高動態范圍顏色和廣色域的創新應用。您對高動態范圍顏色和廣色域技術在CSS中的應用有何看法?歡迎留下您的評論。

          使用@supports判斷CSS屬性支持情況當開發者想要使用一些新的CSS屬性或方法時,往往會擔心會不會出現兼容性問題。為此,CSS3提供了一個新的功能——@supports。這個功能可以幫助開發者判斷當前運行環境是否支持某個CSS屬性或方法,從而避免出現兼容性問題。如何使用@supports使用@supports的語法非常簡單,只需要將需要檢查的屬性名和屬性值作為參數傳遞給@supports即可,例如:```css@supports(background: rgb(0, 0, 0)) { /* 環境支持rgb顏色空間 */}```上面的代碼中,如果當前運行環境支持rgb顏色空間,則會執行對應的代碼塊。

          如果需要判斷多個屬性或值是否被支持,可以使用逗號將它們分隔開來,例如:```css@supports(background: rgb(0, 0, 0), color: hsl(0, 0%, 100%)) { /* 環境同時支持rgb和hsl顏色空間 */}```當然,@supports也支持嵌套使用,例如:```css@supports(display: grid) { .container { display: grid; }}```在上述代碼中,如果當前運行環境支持CSS Grid布局,則會將.container元素的display屬性設置為grid。判斷顏色空間是否被支持顏色空間是CSS3新增的一個重要功能,它可以幫助開發者更加精細地控制顏色的呈現效果。

          在使用顏色空間時,開發者需要先檢查當前運行環境是否支持對應的顏色空間,然后再進行相關的操作。下面是一些常用的顏色空間查詢方法:- RGB顏色空間:支持范圍廣泛,可以用于幾乎所有的設備和應用程序中。- Display-P3顏色空間:適用于Apple設備和部分支持W3C推薦的設備。- Oklch顏色空間:比較新的顏色空間,支持范圍較窄。

          使用@supports判斷顏色空間是否被支持的方法:```css@supports(background: rgb(0 0 0)){ /* rgb顏色空間被支持 */ background: rgb(0 0 0);}@supports(background: color(display-p3 0 0 0)){ /* Display-P3顏色空間被支持 */ background: color(display-p3 0 0 0);}@supports(background: oklch(0 0 0)){ /* Oklch顏色空間被支持 */ background: oklch(0 0 0);}```通過上述方法,可以判斷當前運行環境是否支持RGB、Display-P3和Oklch顏色空間,并根據支持情況設置對應的background屬性。

          應用實例在實際應用中,通常需要兼容新舊標準。

          下面是一個兼容新舊標準的實例:```css:root { --neon-red: rgb(100%, 0, 0); --neon-blue: rgb(0, 0, 100%);}/* 判斷設備是否支持高清展示 */@media (dynamic-range: high) { /* 判斷瀏覽器是否支持display-p3顏色空間 */ @supports (color: color(display-p3 0 0 0)) { /* 在支持的情況下使用display-p3顏色空間 */ --neon-red: color(display-p3 1 0 0); --neon-blue: color(display-p3 0 0 1); }}```上述代碼中,我們定義了兩個顏色變量--neon-red和--neon-blue,并且在@m

          edia查詢中使用@supports判斷設備是否支持高清展示和瀏覽器是否支持display-p3顏色空間,如果支持則使用display-p3顏色空間,否則使用RGB顏色空間。開發調試在開發調試過程中,@supports也可以幫助開發者更好地定位兼容性問題。例如,當某個CSS屬性在某些瀏覽器中不被支持時,可以使用@supports將其排除在某些特定的瀏覽器之外,以確保在這些瀏覽器中不會出現兼容性問題。總結@supports是CSS3提供的一個非常有用的功能,它可以幫助開發者判斷當前運行環境是否支持某個CSS屬性或方法,從而避免出現兼容性問題。在實際應用中,還可以結合顏色空間和@media查詢等功能,實現更加靈活和兼容的CSS樣式。

          新版Chrome瀏覽器增強了DevTools里的拾色器功能,支持CSS Color 4中的新語法,提供了更多的色彩空間和方法,讓開發者更方便地處理顏色屬性。點擊頁面元素中的顏色屬性,在彈出的拾色器中,中間色值右側的箭頭出現下拉框,可以看到新增的色彩空間和方法。選擇不同的色彩空間后,色彩的可調參數也會改變,有助于開發者分辨高清色與非高清色。當選擇非sRGB色域的色值后,展示一條sRGB的分界線,幫助開發者清晰地看出當前選擇的顏色所在的色域。而當選擇一個超出sRGB范圍的顏色后,會在sRGB色域下的色值后邊會帶上一個三角嘆號,提示當前色值已超出了sRGB所能描述的范圍,只能使用相近的顏色作為替代。未來的設計和開發在H5動畫、游戲、3D圖像等方面,對于色彩顯示的要求不會永遠停留在sRGB階段,因此了解不同的色彩空間和方法,以及如何處理超出sRGB范圍的顏色,對于開發者來說是必要的。

          有關Chrome DevTools更多關于高清顏色的更新,可以參閱官方文檔。總之,隨著web端的發展,色彩顯示也會不斷地更新和進化。希望本文的介紹能夠讓更多的開發者了解一些關于色彩的知識。如有錯誤或疏漏,歡迎指正討論。顏色值是網頁設計中一個非常重要的部分,能夠起到突出重點、美化頁面的作用。在CSS中,我們可以使用多種方式來定義顏色值。本文將對CSS中顏色值的不同定義方式進行詳細介紹。一、關鍵字定義在CSS中,我們可以使用關鍵字來定義顏色值。這些關鍵字是預定義的,表示一種特定的顏色。比如,我們可以使用red關鍵字來表示紅色。CSS中預定義了140個顏色關鍵字,這些關鍵字可以直接用于顏色值的定義。二、十六進制表示法另一種常用的顏色值定義方式是使用十六進制表示法。這種表示法用6個十六進制數字來表示一個顏色值,每兩個數字表示紅綠藍三個顏色通道中的一個。

          比如,#FF0000表示紅色,#00FF00表示綠色,#0000FF表示藍色。在十六進制表示法中,每個顏色通道的取值范圍是0到255,因此總共有16777216種可能的顏色值。三、RGB表示法RGB表示法也是一種常用的顏色值定義方式。在這種表示法中,我們使用三個數值來表示紅綠藍三個顏色通道中的顏色值。比如,rgb(255, 0, 0)表示紅色,rgb(0, 255, 0)表示綠色,rgb(0, 0, 255)表示藍色。在RGB表示法中,每個顏色通道的取值范圍是0到255,因此總共有16777216種可能的顏色值。四、RGBA表示法RGBA表示法是在RGB表示法的基礎上增加了一個alpha通道,用來表示顏色的透明度。在RGBA表示法中,我們需要使用四個數值來表示顏色值和透明度。

          比如,rgba(255, 0, 0, 0.5)表示半透明的紅色,其中alpha通道的值為0.5,取值范圍是0到1。五、HSL和HSLA表示法HSL表示法使用色相(Hue)、飽和度(Saturation)和亮度(Lightness)三個值來表示一個顏色。色相表示顏色在色輪上的位置,飽和度表示顏色的純度,亮度表示顏色的明暗程度。HSLA表示法在HSL表示法的基礎上增加了一個alpha通道,用來表示顏色的透明度。總結本文詳細介紹了CSS中顏色值的不同定義方式,包括關鍵字定義、十六進制表示法、RGB表示法、RGBA表示法和HSL/HSLA表示法。不同的顏色值定義方式各有優缺點,在實際開發中需要根據需要進行選擇。同時,我們還可以使用漸變、透明度等技巧來進一步美化頁面,提高用戶體驗。作為開發者,我們需要熟練掌握各種顏色值的定義方式,并靈活運用于實際開發中。

          通過巧妙運用顏色值,可以使頁面更加生動、美觀、易于理解。

          鐵子們大家好

          我是泥萌挖掘師9妹

          想知道有多少小伙伴

          天天蹲點等9妹的推文



          畢竟每次都能知道你所想所需

          9妹這樣貼心的女孩不多了

          不接受反駁的聲音



          經過這段時間的密切觀察

          發現你們都在問一個樣式

          “ 這種點亮效果怎么做到的 ”

          “ 怎么才能實現圖片點亮 ”

          那就是下圖這類




          這么美這么高大上的效果

          如何制作出來的

          很多小伙伴都非常的費解

          別怕

          9妹專治各種疑難雜癥

          真的非常非常簡單



          操作步驟來了

          小板凳坐好小本子準備記筆記


          第一步

          找一張你想點亮的任何圖片

          在編輯器內上傳圖片

          選中圖片后在工具條中選擇美圖



          點開美圖后會看到很多濾鏡

          選擇黑白畫映后點擊確定



          這張圖片在編輯器內

          就是呈現灰色的效果了

          雙擊灰色圖片

          復制地址欄的地址



          第二步


          編輯器內搜索樣式編號

          「 23843 」

          添加到編輯器內

          我們需要利用這個素材實現點亮樣式

          點擊HTML



          選中的代碼就是原圖片地址

          把剛才復制的灰色圖片地址

          粘貼在選中的位置

          點擊HTML返回編輯器內



          因為彩色的原圖

          已經上傳過編輯器內了

          可直接在我的圖片

          再次點擊添加編輯器內



          再次雙擊圖片復制地址

          然后回到HTML里面

          把地址粘貼在陰影處替換掉

          再次點擊HTML

          返回編輯器內就完成啦



          點擊下方查看效果圖

          因為是長方形的圖片

          與下方的文字會有一大段的留白

          也是需要在HTML里面修改


          若插入的圖片顯示不全后面留白太多

          請修改「 858 」的值



          留白在代碼里調整后的效果圖

          完整的點亮圖片

          就這樣完成啦

          點擊下方查看效果圖



          動手動手動手操作

          多操作幾遍就會啦




          以上就是針對點亮樣式

          教程的介紹啦

          如果還有其他的疑問

          可直接留言告訴9妹


          主站蜘蛛池模板: 日本一区二区三区在线视频观看免费| 中文字幕日韩精品一区二区三区| 日本欧洲视频一区| 日韩在线一区二区| 国产一区二区三区久久精品| 国产人妖视频一区在线观看| 亚洲乱码av中文一区二区| 无码精品人妻一区二区三区人妻斩 | 国产伦精品一区三区视频| 亚洲熟女综合色一区二区三区| 无码精品人妻一区二区三区免费看| 亚洲A∨精品一区二区三区| 国产一区二区三区在线免费观看| 无码一区二区波多野结衣播放搜索| 亚洲综合在线成人一区| 性无码免费一区二区三区在线| 激情内射日本一区二区三区| 国产福利一区二区在线视频| 视频一区二区精品的福利| 色一情一乱一伦一区二区三区| 精品成人一区二区三区免费视频 | 鲁大师成人一区二区三区| 日韩AV无码一区二区三区不卡| 怡红院一区二区三区| 国产福利酱国产一区二区| 国产精品久久久久久一区二区三区| 亚洲av成人一区二区三区观看在线 | 亚洲日韩精品无码一区二区三区| 久久免费视频一区| 亚洲AV无码一区东京热久久| 日韩免费无码视频一区二区三区| 中文字幕视频一区| 欧美日本精品一区二区三区| 精品国产日韩亚洲一区在线| 男人的天堂精品国产一区| 精品国产AⅤ一区二区三区4区| 日本一区二区不卡视频| 一区二区三区无码被窝影院| 精品人妻一区二区三区四区在线| 波多野结衣高清一区二区三区| 久久精品一区二区东京热|