css3新特性總結

2022-07-23 13:27:25 字數 2567 閱讀 2131

選擇器

:last-child /*

選擇元素最後乙個孩子

*/:first-child /*

選擇元素第乙個孩子

*/:nth-child(1) /*

按照第幾個孩子給它設定樣式

*/:nth-child(even) /*

按照偶數

*/:nth-child(odd) /*

按照奇數

*/:disabled

/*選擇每個禁用的e元素 */:

checked

/*選擇每個被選中的e元素

*/:not(selector)

/*選擇非 selector 元素的每個元素

*/::selection

/*選擇被使用者選取的元素部分

*/

偽類:用於向某些選擇器新增特殊的效果(沒有建立新元素)

:last-child /*

選擇元素最後乙個孩子

*/:first-child /*

選擇元素第乙個孩子

*/:nth-child(1) /*

按照第幾個孩子給它設定樣式

*/a:link

/*未訪問的鏈結

*/a:visited

/*已訪問的鏈結

*/a:hover

/*滑鼠移動到鏈結上

*/a:active

/*選定的鏈結

*/

偽元素:建立了 html 中不存在的元素,用於將特殊的效果新增到某些選擇器

::before {} /*

選擇器在被選元素的前面插入內容和定義css,使用 content 屬性來指定要插入的內容。

*/::after {}

/*選擇器在被選元素的後面插入內容和定義css,使用 content 屬性來指定要插入的內容。

*/:first-letter /*

選擇該元素內容的首字母

*/:first-line /*

選擇該元素內容的首行

*/::selection

/*選擇被使用者選取的元素部分

*/

css3邊框

border-radius(圓角)、 box-shadow(陰影)、 border-image(邊框)

css3背景

文字效果

text-shadow 向文字新增陰影

text-justify 規定當 text-align 設定為 「justify」 時所使用的對齊方法

text-emphasis 向元素的文字應用重點標記以及重點標記的前景色

text-outline 規定文字的輪廓

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

text-wrap 規定文字的換行規則

word-break 規定非中日韓文字的換行規則

word-wrap 允許對長的不可分割的單詞進行分割並換行到下一行

text-decoration 文字修飾符:overline、line-through、underline 分別是上劃線、中劃線、下劃線

字型您「自己的」的字型是在 css3 @font-face 規則中定義的。

2d/3d

轉換過渡(transition)

使頁面變化更平滑,以下引數可直接寫在 transition 後面

transition-property :執行動畫對應的屬性,例如 color,background 等,可以使用 all 來指定所有的屬性。

transition-duration:過渡動畫的乙個持續時間。

transition-timing-function:在延續時間段,動畫變化的速率,常見的有:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

transition-delay:延遲多久後開始動畫

動畫(animation)

先定義 @keyframes 規則(0%,100% | from,to)然後定義 animation,以下引數可直接寫在 animation 後面

animation-name: 定義動畫名稱

animation-delay: 指定元素動畫開始時間

多列布局

通過css3,能夠建立多個列來對文字進行布局

column-count: 規定元素應該被分隔的列數

column-gap: 規定列之間的間隔

column-rule: 設定列之間的寬度、樣式和顏色規則

使用者介面

resize 屬性規定是否可由使用者調整元素尺寸。

box-sizing 屬性允許您以確切的方式定義適應某個區域的具體內容。

outline-offset 屬性對輪廓進行偏移,並在超出邊框邊緣的位置繪製輪廓。

css 相容核心

-moz-:代表firefox瀏覽器私有屬性

-ms-:代表ie瀏覽器私有屬性

-webkit-:代表safari、chrome瀏覽器私有屬性

-o-:代表opera瀏覽器私有屬性

CSS3新特性總結

1.屬性選擇器 常用的簡單歸納下 attribute value 用於選取帶有指定屬性和值的元素。title w3school attribute value 包含指定詞彙的元素。後代選擇器 title hello attribute value 用於選取帶有以指定值開頭的屬性值的元素,該值必須是整...

css3新特性總結

一 圓角邊框 border radius 5px 二 多背景圖 background url img flwr.gif right bottom no repeat,url gif left top repeat 三 顏色和透明度 由原來的rgb到現在的rgba background rgba 0,...

css3新特性總結

一 圓角邊框 border radius 5px 二 多背景圖 background url img flwr.gif right bottom no repeat,url gif left top repeat 三 顏色和透明度 由原來的rgb到現在的rgba background rgba 0,...