自學Css3第一天筆記

選擇器：.box：類名選擇器， #box：ID選擇器，div p：後代選擇器， div.box：交集選擇器； div,p,span：並集選擇器，

div>p ：子代選擇器； *:萬用字元，div+p：選中div後面的第一個P，div~p：選中div後面所有的P

偽類選擇器：:hover滑鼠經過， :link正常狀態， :action點選， :viaited點選之後的狀態

結構偽類：E：first-child：選擇E父盒子中的第一個E，last-child：選擇E父盒子中的最後一個E

E：nth-child(n)：選擇E父盒子中的第n個E，E:nth-child(odd/even)：選擇E父盒子中編號為奇數、偶數的E標籤

E:nth-child(-n+5)：選擇E父盒子中的前五個E標籤， E:nth-last-child(-n+5)：選擇E父盒子中的後五個E標籤

偽元素：用::標示，::before，在之前新增，::after，在之後新增，產生的偽元素相當於div的子元素，可以使用標籤的屬性

偽元素選擇器：::frist-letter 選擇第一個字母，::frist-line 選擇第一行，::selection 選擇區域的樣式，一般用於設定背景顏色和字型顏色

透明：rgba模式（紅藍綠（0-255） alpha 透明度（0-1））

background-color：rgba(0,0,255,0.3)

HSLA H：色調 S：飽和度 L：亮度Ａ：alpha透明度

background-color：hsla(0,50%,50%,0.1)

opacity：（取值0-1）；可以給盒子設定透明，但是會影響子盒子，並切子盒子不能更改透明度

background：transparent；可以設定透明，但是無法自定義顏色，完全透明

文字陰影：text-shadow：3px 3px 3px red

盒子模型：傳統盒子寬度=padding+border+width，內容區域大小不變，總體大小變化

C3盒子模型 box-sizing：content-box、padding-box、border-box

私有化字首：-webkit-(谷歌的)，-moz-(火狐)，-ms-(IE )這個去百度詳細瞭解如果加字首也無法顯示就放棄使用

邊框圓角：border-radius:100px(正圓)或100%（擴充性強）

border-radius:左上，右上，右下，左下

邊框陰影：box-shadow:左右位移值上下位移值模糊值陰影大小值顏色 inset內陰影

邊框圖片：border-image-source:url();

border-image-slice:27 27 27 27;圖片邊框的剪裁

border-image-width:27px;圖片邊框的寬度

border-image-repeat：

repeat;邊框圖片的正常平鋪，但是可能會顯示不完整

round平鋪，但是保證圖片完整顯示

stretch拉伸顯示

背景尺寸：background-size:設定背景大小（cover放大圖片直至蓋住整個盒子，會超出 contain能完整顯示，但不能保證佈滿餓盒子）

背景原點：預設背景從padding開始 background-origin：padding-box;(border-box,content-box)

背景裁剪：background-clip:padding-box;

多背景：

線性漸變：漸變屬於背景background-image:linear-grendient(to right,起始顏色，終止顏色)，方向也可以使用角度設定比如4 5deg，顏色還可以自定義在框內所佔的長度比這樣實現彩虹線，又或者從多少開始多少結束這樣就可以實現斑馬線

徑向漸變：語法：radiul-gragient(輻射半徑中心點位置，起始顏色，終止顏色)

backgroud-image:radial-gradient(at left top,yellow, blue)

backgroud-image:radial-gradient(at 50px 10px yellow,blue)

過渡體驗：配合：hover使用

1、transition:width 2s,backgroud-color 1s（其還有延遲執行屬性linear 1s表示延遲1s執行或者這樣寫 (transition:all 2s)

2、transition-property 過渡屬性

3、transition-duration 過渡時間

4、transition-timing-function 過渡曲線

(linear勻速ease(ease-out)減速ease-in加速ease-in-out先加速後減速)

5、transition-delay延遲屬性

氣泡案例

位移：translate（）

1、右移正數，左移負數（右下為負，左下為負）

2、第一個指水平移動，第二個值垂直移動距離

3、可寫百分比數值，相對與自身的尺寸

4、盒子在父盒子中居中的方法

position：absolute;

left:50%;

transform:translate(-50%);

旋轉：rotate（45deg）

正值順時針，負值逆時針

旋轉中心：transform-origin 預設旋轉中心：幾何中心

本部落格是用於本人學習筆記，不喜勿噴，禁止用於商業盈利

自學Css3第一天筆記

相關文章