一、新增選擇器:
1. 屬性選擇器:
① E[att~=”val”]:具有att屬性且屬性值爲 用空格分隔的字詞列表,其中一個等於val的E元素。
② 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個參數:length,length,color,常規效果;
② 有4個參數:length,length,length,color,讓陰影模糊,第三個length是模糊程度;
③ 有5個參數。
④ 至少要有2個參數:length,length。
2. 圓角邊框:border-radius。
3. 圖像邊框:border-image:
① border-image-slice:分割方式;
② border-image-width:邊框寬度;
③ border-image-repeat:平鋪方式(streth:拉伸;repeat;round;space)
三、背景
1. background-size:設置背景圖像的尺寸大小(auto:真實大小;cover:等比縮放完全覆蓋;contain:等比縮放到寬度或高度與容器的寬高相等;也可寫數字)
2. background-origin:定位(padding-box:從padding區域開始顯示;border-box:從border開始顯示;content-box:從內容開始顯示。)
3. 多背景:在CSS樣式裏的background-image:url(),url(),.....
四、文本效果
1. 文本陰影:text-shadow;
2. 換行:word-wrap;
3. 文本溢出:text-overflow:clip/ellipsis。要先設置overflow:hidden,才起作用。這個屬性要有特效必須有輔助屬性:white-space:nowrap,內容不換行顯示;overf:hidden,超出部分被隱藏。
4. 輪廓:text-outline,粗細,模糊半徑,顏色(outline一樣的。)