CSS3學習筆記

box-shadow陰影

text-shadow文字陰影

自定義字型

子元素選擇器

::selection文字選中顏色

::before和::after插入內容

選擇器 /*如果將正方形盒子的圓角值改為盒子畫素值的一半或者設定為50%，那麼可以由正方形得到乙個圓形*/

/*如果將乙個長方形的盒子的圓角值設為該盒子高度的一半，可得到乙個膠囊形*/

border-redius :10px /*代表四個角的值均為10px*/ border-redius :10px 20px /*第乙個值代表左上角和右下角，第二個值代表右上角和左下角*/ border-redius :10px 20px 30px /*第乙個值代表左上角，第二個值代表右上角和左下角，第三個值代表右下角*/ border-redius :10px 20px 30px 40px

/*從左上角開始，按照順時針的方向旋轉*/

border-top -left -radius /*左上角*/ border-top -right -redius border-bottom -left -redius border-bottom -right -redius border-top -left -radius: 80px 10px /*水平方向80px，垂直方向10px，相當於圓心的位置改變了*/ border-redius: 80px/10px /*加上斜槓表示x軸和y軸的值，相當於將每個角的值都變成了上述左上角設定的樣式*/

border-redius: 50px 20px/10px

box-shadow :x軸偏移 y軸偏移陰影模糊半徑陰影擴充套件半徑陰影顏色陰影型別; /*陰影模糊半徑值越大，模糊的程度越大；擴充套件半徑會擴充套件陰影範圍，可起到讓顏色加重的作用；陰影顏色如果使用rgb()值來表示，並用第四個值來設定透明度0.5，會讓陰影顯得更真實；

陰影型別有兩種inset-內陰影、預設-外投影*/

注意：

乙個元素可新增多個不同的陰影，多個陰影也會重疊，最先寫的陰影將會顯示在最頂層：

box-shadow :10px 10px 10px red, 10px 10px 5px blue inset;

/*每套樣式用逗號隔開*/

text-shadow

:x軸偏移 y軸偏移陰影模糊半徑顏色;

@font-face /*用於大型專案的字型最好使用開源的字型; 定義多個字型時，要使用多個@font-face結構;

用的字型越多，載入越慢，對使用者體驗就不是很友好，一般使用一兩個特殊字型就行*/

元素選擇器

意義:first-child

父元素的首個子元素（選擇組裡面的某乙個）

:last-child

父元素的最後乙個子元素

:nth-child(n)

父元素的某個子元素

:nth-last-child(n)

父元素的倒數某個子元素

:first-of-type

父元素下特定型別的首個子元素

:last-of-typd

父元素下特定型別的最後乙個子元素

:nth-of-type(2)

父元素下特定型別的某個子元素

:nth-last-of-type(n)

父元素下特定型別的倒數某個子元素

選擇器:first-child 選擇器:nth-child(5) /*設定第五個元素的樣式； odd-設定奇數字的元素的樣式；even-設定偶數字的元素的樣式； 3n-設定位置為3的倍數的元素的樣式；3n+1這種式子也是被允許的*/ 選擇器xx :first-of-type

/*獲取第乙個為xx的元素*/

選擇器::selection /*兩個冒號表示偽類元素，若想相容css2寫乙個冒號也是可以的；

不加選擇器的時候，就是全域性樣式；只對顏色有作用，其他樣式沒有修改作用*/

--不是只能新增文字，新增也是可以的，但是必須有conten屬性，可以設定為空值，但必須有該屬性--> 選擇器::before /*在元素之前插入新內容*/ /*較常用於新增字首，小圖示*/ 選擇器::after /*在元素之後插入新內容*/

/*可用於清除浮動，要記得轉為塊級元素*/

CSS3學習筆記

css3學習筆記

CSS3學習筆記

css3學習筆記

CSS3學習筆記

css3學習筆記

CSS3學習筆記

css3學習筆記

相關推薦