CSS3樣式一


一、新增選擇器

1. 屬性選擇器:

① E[att~=”val”]:具有att屬性且屬性值爲 用空格分隔的字詞列表,其中一個等於valE元素。

② E[att^="val"]:以val開頭的字符串。

③ E[att$="val"]:以val結尾的字符串。

④ E[att*="val"]:包含有val的所有字符串。

 

2. 僞類選擇器

① :not():不含有S選擇符。

② :root():匹配在文檔的根元素,根元素永遠都是html元素。單指網頁的根元素,有且只有一個html:root

③ :nth-child(n):匹配父元素的第n個子元素。

④ :nth-last-child(n):倒數第n個子元素。

⑤ E:first-child():父元素下的第一個子元素E

⑥ E:first-of-type:第一個子元素E

⑦ E:empty{}:沒有任何子元素的元素E

 

二、邊框

1. 陰影:box-shadow:參數:6個。

① 有3個參數:lengthlengthcolor,常規效果;

② 有4個參數:lengthlengthlength,color,讓陰影模糊,第三個length是模糊程度;

③ 有5個參數。

④ 至少要有2個參數:lengthlength

 

2. 圓角邊框:border-radius

3. 圖像邊框:border-image

① border-image-slice:分割方式;

② border-image-width:邊框寬度;

③ border-image-repeat:平鋪方式(streth:拉伸;repeatroundspace

 

三、背景

1. background-size:設置背景圖像的尺寸大小(auto:真實大小;cover:等比縮放完全覆蓋;contain:等比縮放到寬度或高度與容器的寬高相等;也可寫數字)

2. background-origin:定位(padding-box:從padding區域開始顯示;border-box:從border開始顯示;content-box:從內容開始顯示。)

3. 多背景:在CSS樣式裏的background-imageurl(),url(),.....

 

四、文本效果

1. 文本陰影:text-shadow

2. 換行:word-wrap

3. 文本溢出:text-overflowclip/ellipsis。要先設置overflowhidden,才起作用。這個屬性要有特效必須有輔助屬性:white-spacenowrap,內容不換行顯示;overfhidden,超出部分被隱藏。

4. 輪廓:text-outline,粗細,模糊半徑,顏色(outline一樣的。)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章