邊框

|---盒子圓角 border-radius

|---盒子陰影 box-shadow：

背景

|---引入背景 background-image

|---背景尺寸 background-size

|---背景平鋪 background-repeat

|---背景位置

|-----位置定位1（background-origin）

|------根據文本位置：content-box

|------根據邊框位置：border-box

|------根據內邊距位置:padding-box

|------使用這個屬性，必須設置背景為no-repeat

|-----位置定位2（background-position）

|------ top rihgt bottom left；background-position:距左多少 距右多少

|---多重背景：逗號分割：background-image:url(images/bg_flower.gif), url(images/border.png);

background-repeat:no-repeat;

文字

|---文本陰影：text-shadow：三個值：分別代表距離左側、距離上側、陰影顏色 陰影會顯示文字

text-shadow：四個值：分別代表距離左側、距離上側、模糊程度及陰影顏色

|---文本溢出屬性

|-----overflow: hidden; white-space:nowrap;讓文本強制不換行 要先設置這兩個屬性

|-----text-overflow

|------clip：修剪文本。

|------ellipsis：顯示省略符號來代表被修剪的文本

|------自定義（string）：自己定義符號，給定的字符串來代表被修剪的文本

|---文本換行屬性 word-break:

|-----word-break:break-all 內容長度到200px時自動換行。如果最後是一個完整的長單詞，它會把單詞截斷

|-----word-break:break-word; 會把句末單詞完整的放到下一行的開頭

顏色之RGBA與透明度opcity

|---R：紅 G：綠 B：藍 alpha:透明度的參數

|---RGB的取值範圍是0~255/0~100% alpha的取值範圍是0~1 不可為負值

|---透明度 opcity：取值範圍0~1

漸變顏色

|---background-image: linear-gradient(to bottom,#fff,red);

|---說明：參數說明：第一個參數指定漸變方向 to top,to bottom,to right,to left,to top left......
第二和第三個參數：是指定開始與結束的顏色值 可以有多個顏色background-image: linear-gradient(to bottom,#fff,black,red);

旋轉

|---2D

|-----transform:

|------rotate()——進行旋轉，括號內部寫旋轉角度，默認順時針旋轉.允許負值，元素將進行逆時針旋轉

|------translate()——從當前位置進行移動，括號內為x，y值。允許負值，將反方向移動
transform:translate(30px,30px)：向右30px，向下30px移動，原來位置保存

|------scale()——改變原始尺寸，按照倍數變化，括號內為width、height的倍數
transform:scale(2,4)：寬度變為2倍，高度變為4倍

|------skew()——水平、垂直方向進行扭轉，括號內是水平扭轉角度、垂直扭轉角度
transform:skew(30deg,0deg);將橫向扭轉30度的div，內部文字會跟隨扭轉
transform:skew(0deg,30deg);將縱向扭轉30度的div，內部文字會跟隨扭轉
transform:skew(30deg,30deg);將橫向扭轉30度、縱向扭轉30度的div，內部文字會跟隨扭轉

|---3D

|-----transform

|------rotateX()——沿水平X軸進行垂直的翻轉，括號內寫轉動度數

|------rotateY()——沿垂直Y軸進行水平的翻轉，括號內寫轉動度數

|---2D與3D的區別

|-----2D轉換跟3D轉換的區別：2D轉換僅僅在於平面，文字可以看出並沒有反過來
3D轉換是相當於鏡面效果的，進行了前後空間（涉及到了Z軸）的占用進行的翻轉。

過度

|---transition：專門應對顏色、長度、寬度、位置等變化的過渡

               #aaa{
            width:200px;
            height: 200px;
            border: 1px solid red;
            transition:2s;
        }
        #aaa:hover{
            width: 500px;
        }

效果是鼠標移上之後框會有過程放大

動畫

|---1、@keyframes規則用於創建動畫。在@keyframes中規定某項CSS樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果
2、使用animation進行動畫捆綁。兩個值：動畫名稱、時長
3、我們一般情況下使用0%~100%來規定動畫發生的時機。或者使用關鍵詞from...to...，效果等同於0%~100%。
4、加上一個infinite值就可以無限執行了
5、ease——默認開始慢慢加速，結束時慢慢減速。
linear——默認始終使用相同速度運行。
alternate——交替執行（也可以成為正反執行）

div{
    width:300px;
    height:300px;
    background:black;
    position:relative;/*由於需要進行位置改變，所以增加了position屬性*/
    animation:myfirst 5s infinite alternate;/*動畫捆綁，兩個值，動畫名稱、時長，加上一個無限執行，交替執行*/
}
@keyframes myfirst
{/*改變位置和背景顏色*/
0%   {background:red; border-radius:90px; box-shadow:-35px 0px 15px gray; left:0px; top:0px;}
25%  {background:yellow; border-radius:0px; left:400px; top:0px;}
50%  {background:blue; border-radius:90px; left:400px; top:300px;}
75%  {background:green; border-radius:0px; box-shadow:0px 30px 15px gray; left:0px; top:300px;}
100% {background:red; border-radius:20px; left:0px; top:0px;}
}

彈性盒子

|--- CSS3 的一種新的布局模式。

|----- display: flex;考慮瀏覽器兼容問題：定義為彈性盒子

|-----彈性子元素在父容器中的位置排列（橫向、縱向）

|------flex-direction

|------- row：橫向從左到右排列（左對齊），默認的排列方式。

|------- row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。

|------- column：縱向排列。

|-------column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。

|-----彈性盒子的子元素換行方式

|------flex-wrap：nowrap - 默認， 彈性容器為單行。該情況下彈性子項可能會溢出容器。
wrap - 彈性容器為多行。該情況下彈性子項溢出的部分會被放置到新行，子項內部會發生斷行
wrap-reverse -反轉 wrap 排列

|-----彈性子元素在父容器中的對齊方式

|------橫向對齊：justify-content：

|------縱向對其：align-items：

|-----彈性子元素如何分配空間

|------flex：

.flex-container {
    display: flex;
    width: 400px;
    height: 250px;
}
.item1 {
    flex: 2;
}

.item2 {
    flex: 1;
}

.item3 {
    flex: 1;
}

|-----子元素的屬性

|------排序：order

|------邊距：margin

|------縱軸對齊方式：align-self

css3知識總結