前端小知識 關於css3新增知識 歸納總結

2022-08-19 12:48:22 字數 2649 閱讀 7330

1.新增選擇器

e:nth-last-child(n) 


e:nth-of-type(n) 


e:nth-last-of-type(n) 


e:last-child 


e:first-of-type 


e:only-child 


e:only-of-type 


e:empty 


e:checked 


e:enabled 


e:disabled 


e::selection 


e:not(s)


2.font-face 特性


font-face 可以用來載入字型樣式，而且它還能夠載入伺服器端的字型檔案，讓客戶端顯示客戶端所沒有安裝的字型。


3.word-wrap & text-overflow 樣式


text-overflow：規定當文字溢位包含元素時發生的事情。


4.文字渲染（text-decoration）
text-fill-color: 文字內部填充顏色

text-stroke-color: 文字邊界填充顏色

text-stroke-width: 文字邊界寬度

5.多列布局（multi-column layout）
column-count：表示布局幾列。

column-rule：表示列與列之間的間隔條的樣式

column-gap：表示列於列之間的間隔

6.邊框和顏色（color, border）


css3提供支援顏色和hsl的透明度、圓角


7.漸變效果（gradient）


線性漸變、徑向漸變


8.陰影（shadow）和反射（reflect）效果


陰影效果：text-shadow 、box-shadow


反射：box-reflect


9.css3 的背景效果
* background-clip: border-box; 背景從 border 開始顯示 ;

* background-clip: padding-box; 背景從 padding 開始顯示 ;

* background-clip: content-box; 背景顯 content 區域開始顯示 ;

* background-clip: no-clip; 預設屬性，等同於 border-box;

「background origin」，用於確定背景的位置，它通常與 background-position 聯合使用

* background-origin: border-box; 從 border. 開始計算 background-position;

* background-origin: padding-box; 從 padding. 開始計算 background-position;

* background-origin: content-box; 從 content. 開始計算 background-position;

「background size」，常用來調整背景的大小，注意別和 clip 弄混，這個主要用於設定本身。有以下可能的屬性：


* background-size: contain; 縮小以適合元素（維持畫素長寬比）


* background-size: cover; 擴充套件元素以填補元素（維持畫素長寬比）


* background-size: 100px 100px; 縮小至指定的大小 .


* background-size: 50% 100%; 縮小至指定的大小，百分比是相對包 含元素的尺寸 .


「background break」屬性，css3 中，元素可以被分成幾個獨立的盒子（如使內聯元素 span 跨越多行），background-break 屬性用來控制背景怎樣在這些不同的盒子中顯示。


* background-break: continuous; 預設值。忽略盒之間的距離（也就是像元 素沒有分成多個盒子，依然是乙個整體一 樣）


* background-break: bounding-box; 把盒之間的距離計算在內；


* background-break: each-box; 為每個盒子單獨重繪背景。


10.盒子模型


一種非常靈活的布局方式，但是支援這一特性的瀏覽器並不多，目前只有 webkit 核心的新版本 safari 和 chrome 以及 gecko 核心的新版本 firefox。


11.transitions, transforms 和 animation、transitions


transition-property：用於指定過渡的性質，比如 transition-property:backgrond 就是指 backgound 參與這個過渡


transition-duration：用於指定這個過渡的持續時間


transition-delay：用於制定延遲過渡的時間


transition-timing-function：用於指定過渡型別，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier




 
CSS3知識總結
七 css3屬性選擇器 上 什麼是css3 css3發展現狀 屬性選擇器列表 類選擇器 屬性選擇器 偽類選擇器5的權重是10 屬性選擇器 演示 button button disabled 八 css3屬性選擇器 下 演示 input type search span class black spa...


前端知識學習 CSS3邊框與圓角
border radius屬性 概念 乙個最多可指定四個border radius屬性的復合屬性，這個屬性允許你為元素新增圓角邊框！語法 border radius 1 4length 1 4length 相容性 ie9 firefox4 chrome，safari5 opera css3指定每個圓...


重點知識 CSS3
三種基本選擇器包括 id選擇器 類選擇器 元素選擇器 id選擇器用於選擇具有指定id屬性的元素 類選擇器用於選擇具有指定class類名的元素 元素選擇器用於選擇指定型別的元素 id選擇器 類選擇器 元素選擇器 盒子模型的結構 content 顯示內容 border 邊框 padding 內邊距 內容...