css rgba hsla知識點講解及半透明邊框

2021-10-07 16:42:42 字數 1442 閱讀 6090

引數:r:紅色值。正整數 | |百分數

g:綠色值。正整數 | |百分數

b:藍色值。正整數 | |百分數

a:alpha透明度。取值0~1之間。

說明:此色彩模式與rgb相同,只是在rgb模式上新增了alpha透明度。

rgba 顏色值得到以下瀏覽器的支援:ie9+、firefox 3+、chrome、safari 以及 opera 10+。

hsl 指的是 hue(色調)、saturation(飽和度)、lightness(亮度),它表示顏色柱面座標表示法。

hsl 顏色值是這樣規定的:hsl(hue, saturation, lightness)。

hue 是色盤上的度數(從 0 到 360) - 0 (或 360) 是紅色,120 是綠色,240 是藍色。

saturation 是百分比值;0% 意味著灰色,而 100% 是全彩。

lightness 同樣是百分比值;0% 是黑色,100% 是白色。

hsla 顏色值是 hsl 顏色值的擴充套件,帶有乙個 alpha 通道 - 它規定了物件的不透明度。

hsla 顏色值是這樣規定的:hsla(hue, saturation, lightness, alpha),其中的 alpha 引數定義不透明度。alpha 引數是介於 0.0(完全透明)與 1.0(完全不透明)的數字。

hsla 顏色值得到以下瀏覽器的支援:ie9+、firefox 3+、chrome、safari 以及 opera 10+。

小應用:半透明邊框

給乙個容器加乙個白色背景和一道半透明的白色邊框:

起初,我是這樣寫的:

divbody
半透明邊框不起作用:

怎麼回事?後來查詢資料:

其實邊框是存在的,只不過這個容器的自己的白色背景,透過了白色邊框;而不是body元素的背景透過白色邊框(這是才是我們想要的效果),所以實際上看到的效果跟純白實色的邊框完全一樣。

在css 2.1中,這就是背景的工作原理,我們只能接受且向前看。幸運的是,我們可以通過,background-clip屬性來調整上述預設行為帶來的困惑。

background-clip

預設的值是 border-box  它表示背景會被元素的border box(邊框的外沿框)裁切掉。如不想背景侵入到邊框所在的領地,則可以用它的另乙個值padding-box

這樣,瀏覽器就會用內邊距的外沿把背景裁切掉。

小知識點 第七講

多執行緒常用設計 future模式 通過非同步呼叫方式 服務程式不等資料處理完成便立刻返回給客戶端乙個偽裝的資料,客戶端拿到這個結果後,不急於進行處理,而去呼叫了其他的業務處理邏輯,充分利用等待時間,處理完其他的業務邏輯之後,在處理返回結果比較慢的future資料進行處理。整個過程呼叫中不存在無謂的...

小知識點 第四講

裝飾模式 它擁有乙個設計非常巧妙的結構,他可以動態新增物件功能,通過委託機制復用元件功能 在執行時 將這些功能元件進行疊加,從而成為乙個 超級物件 使之擁有所有的這些元件的功能 這樣有效的分離 效能元件 擴充套件功能元件 和功能元件,從而公升級模組的可維護性和增加模組的復用性。jdk中 output...

TestLink知識點Mantis知識點

testlink知識點 1 testlink系統提供了六種角色 a guest 只有讀的許可權,適合於檢視測試用例和測試需求,以及專案分析的使用者。b testdesigner 可以開展測試用例和測試需求的所有工作。c tester 只能執行測試用例。d senior tester 可以檢視和維護測...