好程式設計師web前端分享CSS學習 HSLA顏色模式

2021-09-24 08:54:22 字數 693 閱讀 2274

好程式設計師web前端分享css學習:hsla顏色模式

一、理論:

1.hsla顏色模式

a.hsla在hsl基礎上增加了不透明度,值越大透明度越低

b.hsla顏色模式的瀏覽器相容性和hsl一樣,只有較新版本的主流瀏覽器才支援

2.rgba和hsla顏色模式二者可以完全相互替換

3.rgba/hsla的ie相容方案

a.在ie8以下版本,一般在前面設定乙個非透明色,在其後緊跟乙個rgba/hsla顏色模式

b.將透明的png平鋪做為背景,適用於ie7-8

c.使用gradient濾鏡可以指定半透明顏色,將起止色設定為同一種顏色即可避免產生漸變

二、實踐:

1.1

0.8

0.6

0.4

0.2

1 0.8

0.6

0.4

0.2

1 0.8

0.6

0.4

0.2

1 0.8

0.6

0.4

0.2

1 0.8

0.6

0.4

0.2

好程式設計師web前端技術分享css盒模型

web前端技術分享css盒模型 學習目標 一 css盒模型的概念及組成 概念 盒模型是css布局的基石,它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間.盒模型的組成 邊框 邊界 邊距 補白 填充 內容區。二 盒子模型的相關元素 說明 填充 pad...

好程式設計師web前端分享CSS3 邊框

好程式設計師web前端分享css3 邊框,通過 css3,您能夠建立圓角邊框,向矩形新增陰影,使用來繪製邊框 並且不需使用設計軟體,比如 photoshop。在本章中,您將學到以下邊框屬性 border radius box shadow border image 瀏覽器支援 internet ex...

好程式設計師web前端技術分享css盒模型

web前端技術分享css盒模型 學習目標 一 css盒模型的概念及組成 概念 盒模型是css布局的基石,它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間.盒模型的組成 邊框 邊界 邊距 補白 填充 內容區。二 盒子模型的相關元素 說明 填充 pad...