web前端全棧0基礎到精通(祺)19

2021-10-13 12:09:13 字數 1422 閱讀 6164

css 語法

filter:本身生效

**backdrop-filter:下層標籤生效**
filter

描述none

預設值,沒有效果。

blur(px)

給影象設定高斯模糊。"radius"一值設定高斯函式的標準差,或者是螢幕上以多少畫素融在一起, 所以值越大越模糊;如果沒有設定值,則預設是0;這個引數可設定css長度值,但不接受百分比值。

brightness(%)

給應用一種線性乘法,使其看起來更亮或更暗。如果值是0%,影象會全黑。值是100%,則影象無變化。其他的值對應線性乘數效果。值超過100%也是可以的,影象會比原來更亮。如果沒有設定值,預設是1。

contrast(%)

調整影象的對比度。值是0%的話,影象會全黑。值是100%,影象不變。值可以超過100%,意味著會運用更低的對比。若沒有設定值,預設是1。

drop-shadow(h-shadow v-shadow blur spread color)

給影象設定乙個陰影效果。陰影是合成在影象下面,可以有模糊度的,可以以特定顏色畫出的遮罩圖的偏移版本。 函式接受(在css3背景中定義)型別的值,除了"inset"關鍵字是不允許的。該函式與已有的box-shadow box-shadow屬性很相似;不同之處在於,通過濾鏡,一些瀏覽器為了更好的效能會提供硬體加速。

grayscale(%)

將影象轉換為灰度影象。值定義轉換的比例。值為100%則完全轉為灰度影象,值為0%影象無變化。值在0%到100%之間,則是效果的線性乘子。若未設定,值預設是0;

hue-rotate(deg)

給影象應用色相旋轉。"angle"一值設定影象會被調整的色環角度值。值為0deg,則影象無變化。若值未設定,預設值是0deg。該值雖然沒有最大值,超過360deg的值相當於又繞一圈。

invert(%)

反轉輸入影象。值定義轉換的比例。100%的價值是完全反轉。值為0%則影象無變化。值在0%和100%之間,則是效果的線性乘子。 若值未設定,值預設是0。

opacity(%)

轉化影象的透明程度。值定義轉換的比例。值為0%則是完全透明,值為100%則影象無變化。值在0%和100%之間,則是效果的線性乘子,也相當於影象樣本乘以數量。 若值未設定,值預設是1。該函式與已有的opacity屬性很相似,不同之處在於通過filter,一些瀏覽器為了提公升效能會提供硬體加速。

saturate(%)

轉換影象飽和度。值定義轉換的比例。值為0%則是完全不飽和,值為100%則影象無變化。其他值,則是效果的線性乘子。超過100%的值是允許的,則有更高的飽和度。 若值未設定,值預設是1。

sepia(%)

將影象轉換為深褐色。值定義轉換的比例。值為100%則完全是深褐色的,值為0%影象無變化。值在0%到100%之間,則是效果的線性乘子。若未設定,值預設是0;

web前端全棧0基礎到精通(祺)10

多欄布局解決方案 document center left right 優化 品質 使用精靈圖 測試檢查 1 做完的頁面要與設計稿進行比對,保證對設計稿 95 以上的還原度。1 頁面模組的完整性,保證頁面不出現模組丟失 尤其是懸浮的側邊欄 彈窗 下拉列表等 2 字型 字型大小 文字顏色的一致性 3 ...

web前端全棧0基礎到精通(祺)12

css3簡介 css3新增選擇器 以box結尾 包含box 結構性偽類選擇器 last child 選擇器 用於選取屬於其父元素的最後乙個子元素的指定選擇器 nth child n 選擇器 匹配屬於其父元素的第n個子元素,n可以是數字 關鍵字或公式 nth last child 選擇器 匹配屬於其元...

web前端全棧0基礎到精通(祺)13

css3過渡屬性 transition duration 規定完成過渡效果需要多少秒或毫秒。transition timing function規定速度效果的速度曲線。transition delay 定義過渡效果從何時開始。transition屬性簡寫 css3的 transform 屬性 瀏覽器...