邊框的知識點：

1.border-radius:

border-radius設定的值越大，弧度越大，可以用具體數值10px來設定，也可以用20% 百分比來設定；你也可以只設置一個或其中幾個角的弧度，就像這樣：

div{
        width:100px;
        height: 100px;
        border:1px solid #333;
        /*border-radius: 20px;*/
        border-bottom-right-radius: 20px;
    }

2.box-shadow:

用來設定一個下拉陰影得框，語法如下：
box-shadow: h-shadow v-shadow blur spread color inset;

背景知識點：

background-image:

div{
        width: 200px;
        height: 200px;
        /*可以新增多個背景圖*/
        /*設定url*/
 

        background-image:url(img1.png),url(img2.png);
        /*設定位置*/
        background-position: 100px 50px,left top;
        /*是否重複*/
        background-repeat: no-repeat,repeat;
    }

還可以寫一塊

div{
    background:url(img1.png) 10px 20px no-repeat,url(img2.png) left top repeat;
}

background-size:

用於定義背景圖片的大小：

div{
    background:url(logo.png);
    /*這裡還可以用百分比 100% 100%表示填充整個區域*/
    background-size:80px 50px;
    background-repeat:no-repeat;
}

background-origin:

background-Origin屬性指定了背景影象的位置區域。
content-box, padding-box,和 border-box區域內可以放置背景影象。

background-clip:

CSS3中background-clip背景剪裁屬性是從指定位置開始繪製。

文字效果:

text-shadow:

新增文字陰影，類似於box-shadow;

文字溢位處理：

white-space:nowrap;//強制不換行
text-overflow:ellipsis;//超出部分用…顯示
text-overflow:clip;//超出剪下掉
word-wrap:break-word;//允許長文字換行
word-break:break-all;//允許拆分換行
word-break:keep-all;//不允許拆分換行

字型

@font-face{
        /*testFont值的就是你自定義的字型的名稱，最好是使用你下載的預設字型名稱，它將被引用到你後面的font-family:testFont;*/
        font-family:"testFont";
        /*自定義字型檔案得路徑，可以是相對路徑也可以是絕對路徑*/
        src:url("Pokemon Hollow.ttf");
        /*是否加粗*/
        font-weight: normal;
        /*字型樣式*/
        font-style: normal;
    }
    p{font-family: testFont;}

2D轉換

transform:translate(50px,100px):

translate()方法，根據左(X軸)和頂部(Y軸)位置給定的引數，從當前元素位置移動。

transform:rotate(30deg);

表示以中心為原點順時針旋轉30個弧度，負數表示逆時針旋轉；

transform:scale(2,3);

表示橫向和縱向增大的倍數，上面就表示橫向擴大2倍，豎向擴大3倍；

transform:skew(20deg,30deg);

表示繞x和y軸傾斜的度數；
這幾個方法(不包含rotate())都可以單獨設定在X或Y上的值；像這樣translateX(20px);

3D轉換

rotateX(30deg);rotateY(20deg);

表示繞X軸或者Y軸進行立體轉換，

過渡

tansition

1.指定要新增效果的css屬性，
2.指定效果的持續時間。
transition:width 2s,heigth 3s;
也可以分開定義；

div{
        width:200px;
        height: 200px;
        background: yellow;
        /*定義css屬性*/
        transition-property: width;
        /*定義持續時間*/
        transition-duration: 1s;
        /*定義時間曲線，預設是ease*/
        transition-timing-function: linear;
        /*定義延遲時間*/
        transition-delay: 2s;
    }

動畫

@keyframes 規則：

@keyframes規則是建立動畫。 @keyframes規則內指定一個CSS樣式和動畫將逐步從目前的樣式更改為新的樣式。

css3動畫

動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。您可以改變任意多的樣式任意多的次數。請用百分比來規定變化發生的時間，或用關鍵詞 “from” 和 “to”，等同於 0% 和 100%。0% 是動畫的開始，100% 是動畫的完成。為了得到最佳的瀏覽器支援，您應該始終定義 0% 和 100% 選擇器。

@keyframes myfirst
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}
div{
    width:300px;
    height: 300px;
    /*定義動畫名稱*/
    animation-name: myfirst;
    /*執行時間*/
    animation-duration: 5s;
    /*執行的時間曲線 預設是ease*/
    animation-timing-function: linear;
    /*延遲時間*/
    animation-delay: 2s;
    /*執行的次數 預設是1*/
    animation-iteration-count: infinite;
    /*是否在下一週逆向播放*/
    animation-direction: alternate;
    /*是否正在執行或暫停*/
    animation-play-state: running;
}
div
{
    animation: myfirst 5s linear 2s infinite alternate;
}