自學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    預設旋轉中心：幾何中心

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