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

2021-10-12 17:21:04 字數 886 閱讀 9695

css3簡介

css3新增選擇器

以box結尾

包含box

結構性偽類選擇器

:last-child 選擇器:用於選取屬於其父元素的最後乙個子元素的指定選擇器

:nth-child(n)選擇器:匹配屬於其父元素的第n個子元素,n可以是數字、關鍵字或公式

:nth-last-child()選擇器:匹配屬於其元素的第n個子元素的每個元素,不論元素的型別,從最後乙個子元素開始計數。n可以是數字、關鍵字或公式

:nth-of-type(n):選擇器匹配屬於父元素的特定型別的第n個子元素。n可以是數字、關鍵字或公式

:nth-last-of-type(n):選擇器匹配屬於父元素的特定型別的第n個子元素的每個元素,從最後乙個子元素開始計數。n可以是數字、關鍵字或公式

狀態偽類選擇器

css3常用邊框屬性

box-shadow

text-shadow

css3背景屬性

background-origin: 規定背景的定位區域。背景可以放置於content-box、padding-box或border-box區域。

background-clip: 規定背景的繪製區域

css3漸變屬性

radial-gradient

使用者介面

瀏覽器的私有字首(相容高版本,提前相容)

box-sizing 屬性

content-box:寬度和高度分別應用到元素的內容框;即在寬度和高度之外繪製元素的內邊距和邊框

border-box:為元素設定的寬度和高度決定了元素的邊框盒。也就是說,為元素指定的任何內邊距和邊框都不會改變盒子大小

calc函式 (實現不同單位之間換算),-兩邊要加空格

多列布局

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

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

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

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

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

css 語法 filter 本身生效 backdrop filter 下層標籤生效 filter 描述none 預設值,沒有效果。blur px 給影象設定高斯模糊。radius 一值設定高斯函式的標準差,或者是螢幕上以多少畫素融在一起,所以值越大越模糊 如果沒有設定值,則預設是0 這個引數可設定c...