CSS3新增功能01

2022-08-20 01:33:08 字數 1855 閱讀 8432

selector1~selector2:只能選擇selector1後面的兄弟元素。

1.2.1 e[pro]:選擇有pro屬性的元素e。

1.2.2 e[pro=value]:選擇有pro屬性的,並且屬性值是value的元素e。

1.2.3 e[pro^=value]:選擇有pro屬性的,並且屬性值中以value開頭的元素e。

1.2.4 e[pro$=value]:選擇有pro屬性的,並且屬性值中以value結尾的元素e。

1.2.5 e[pro|=value]:選擇有pro屬性的,屬性值使用「-」進行分割,並且第乙個是 value的元素e。

1.2.6 e[pro*=value]:選擇有pro屬性的,並且屬性值中有value字元的元素e。

1.3.1 e:nth-child(n):在e元素的兄弟元素中,選擇第n個並且是e的元素。

注意:1、n從1開始算起;2、n可以是數字,也可以是各類算術公式;3、n也可以是odd,或者是even;4、如果第n個元素不是e元素的話,無法選中。

1.3.2 e:first-child:在e元素的所有兄弟元素中,選擇第乙個e元素。

1.3.3 e:last-child:在e元素的所有兄弟元素中,選擇最後乙個e元素。

1.3.4 e:not(selector):在e元素的所有兄弟元素中,選擇除selector以外的元素。

1.3.5 e:target:可以實現頁面內指定id錨點跳轉,並且作為錨的目標元素可以單獨設定樣式。

2.1.1 可以為、且只能為雙標籤新增子元素。

2.1.2 預設為行內元素。

2.1.3 必須新增content屬性,可以新增具體內容,也可以是空字串,但是content中無法寫其他元素。

2.1.4 根據具體要求改變它的形態,如塊元素等。

同before使用方法一致。

給被選中的內容設定樣式,但是只能設定背景顏色、文字顏色和文字陰影。

改變placeholder屬性的內容的文字樣式。

3.1.1 引數1:設定陰影方向,預設為向外。可以設定為inset,陰影為向內。可選設定。

3.1.2 引數2:x方向的偏移量,可以為負值,必須設定。

3.1.3 引數3:y方向的偏移量,可以為負值,必須設定。

3.1.4 引數4:陰影的模糊程度(會在原陰影大小上做變化),不可為負值,可選設定。

3.1.5 引數5:擴充或縮小陰影的大小,可以為負值,可選設定。

3.1.6 引數6:設定陰影的顏色,預設為黑色。

在需要設定多重陰影的時候可以直接通過「,」來分割。

4.1.1 引數1:x方向的偏移量,可以為負值,必須設定。

4.1.2 引數2:y方向的偏移量,可以為負值,必須設定。

4.1.3 引數3:陰影的模糊程度(會在原陰影大小上做變化),不可為負值,可選設定。

4.1.4 引數4:設定陰影的顏色,預設為黑色。

在需要設定多重陰影的時候可以直接通過「,」來分割。

a的取值範圍[0-1),這種方式設定的透明度不會被子元素繼承。

a的取值範圍[0-1),這種方式設定的透明度不會被子元素繼承。

這種方式設定的透明度不會被子元素繼承。

直接通過opacity或者alpha的方式設定會影響到子元素,透明度被子元素繼承。

我們在以往給盒子設定寬高後會因為盒子的內邊距或者邊框的原因而影響到頁面的整體布局,在css3中給出了元素盒子模型的概念。

box-sizing:設定盒子以乙個指定的標準改變各尺寸。

content-box:預設值,保證盒子內容大小不變,向外擴充。當繼續改變盒子的內邊距或者邊框大小時,會向外擴充,盒子整體的大小會變化。

border-box:保證盒子整體的大小不變,向內擴充。當繼續改變盒子內邊距或者邊框大小時,盒子整體的大小不會變化,會想盒子內部進行擴充。

CSS3 新增功能

css3基礎 css3是css的公升級版本 css是從css1.0 css2.0 css2.1和css3.0這幾個版本一直公升級而來,其中css2.1是css2.0的修訂版,css3。0是最新版 我們平常所說的css其實是指css2.1,而css特指相對陳述事實2.1 新增加的屬性 css3.0相對...

CSS3相比CSS新增哪些功能

1 css3介紹 4 文字陰影與自動換行 5 各種盒模型 總體分為block型別和inline型別,再細分為inline block型別 inline table型別 list item型別 run in型別 compact型別 相關型別 none型別 7 css3新增的背景樣式 backgroun...

CSS3新增屬性用法整理CSS3新增屬性用法整理

css3新增屬性用法整理 css3新增屬性用法整理 1 box shadow 陰影效果 2 border color 為邊框設定多種顏色 3 border image 邊框 4 text shadow 文字陰影 5 text overflow 文字截斷 6 word wrap 自動換行 7 bord...