1.邊框屬性

border-radius屬性

• 作用：允許為元素新增圓角邊框
• 語法：border-radius:lt-x rt-x lb-x rb-x/lt-y rt-y lb-y rb-y;//分別為左上角、右上角、左下角、右下角的半徑，如果只有兩個引數               則第一個引數代表左上和右下，第二次引數代表右上和左下。

            例如： border-radius:100px 0px 100px 0px/100px 0px 100px 0px;//左上（100px,100px）,右上（0px,0px）,左下                                                                （100px,100px）,右下（0pa,0px）

                        border-radius:25px 20px 15px 10px;//左上（25px,25px）,右上（20px20px）,左下（15px,15px）,右下                                                                   （10pa,10px）

                        border-radius:25px 10px;//左上和右下為25，右上和左下為10；

                        border-radius:25px;//四個角都是以（25px,25px）畫半徑弧。

border-image屬性

• 作用：為元素新增邊框背景
• 語法：border-image:source slice width outset repeat;
• 語法屬性：

                    source：定義邊框的背景圖片源，即影象URL。

                    slice ：定義如何裁剪背景影象。  

                    width：定義邊框背景影象的顯示大小（即邊框顯示大小）

                    outset：定義邊框背景影象的偏移位置（不支援）

                    repeat：定義邊框背景影象的重複性，重複（repeated）、拉伸（stretched）或平鋪（rounded）

box-shadow屬性 

•  作用：設定一個或多個下拉陰影的框
• 語法：box-shadow：h-shadow v-shadow blur spread color;
• 語法描述：

                 h-shadow：水平陰影的位置，允許負值。

                 v-shadow：垂直陰影的位置，允許負值。

                 blur：模糊距離。 

                 spread：陰影的大小。

                 color：陰影的顏色。

2.背景屬性

background-origin屬性

•  作用：定義背景影象的定義區域
• 語法：background-origin：padding-box|border-box|content-box;
• 語法描述：

                 padding-box：背景影象框填充的相對位置。

                 border-box：背景影象邊界框的相對位置。

                 content-box：背景影象的相對位置的內容框。 

background-clip屬性

•  作用：定義背景影象的裁剪區域
• 語法：background-clip：border-box|padding-box|content-box;
• 語法描述：

                 padding-box：從補白區域向外裁剪背景。

                 border-box：預設值，從邊框區域向外裁剪背景。

                 content-box：從內容區域向外裁剪背景。 

background-size屬性

•  作用：定義背景影象的裁剪區域
• 語法：background-clip：length|percentage|cover|contain;
• 語法描述：

                 length：設定背景影象高度和寬度。第一個值是寬度，第二個值是高度。

                 percentage：將計算相對於背景定位區域的百分比。第一個值是寬度，第二個值是高度。

                 cover：保持影象的縱橫比並將影象縮放成將完全覆蓋背景定位區域的最小大小。

                 contain：保持影象的縱橫比並將影象縮放成將完全覆蓋背景定位區域的最大大小。。

 3.文字屬性

   text-shadow屬性 

•  作用：設定一個或多個下拉陰影的框
• 語法：text-shadow：h-shadow v-shadow blur color;
• 語法描述：

                 h-shadow：水平陰影的位置，允許負值。

                 v-shadow：垂直陰影的位置，允許負值。

                 blur：模糊距離。

                 color：陰影的顏色。

text-overflow屬性

•  作用：定義省略文字的處理方式
• 語法：text-overflow：clip|ellipsis|string;
• 語法描述：

                 clip：修剪文字。

                 ellipsis：顯示省略符號來代表被修剪的文字。

                 string：使用給定的字串來代表被修剪的文字。 

注意：實際上，text-overflow屬性僅是內容註解，表明當文字溢位時是否顯示省略標記，並不具備樣式定義的特性。要實現溢位時產生省略號的效果，我們應該再定義兩個樣式：white-space：nowrap（強制文字一行內顯示）和overflow：hidden（溢位內容為隱藏） 

word-wrap屬性

•  作用：定義文字超過指定容器的邊界時是否斷開轉行
• 語法：word-wrap：normal|break-word;
• 語法描述：

                 normal：只在允許的斷字點換行（瀏覽器保持預設處理）。

                 break-word：在長單詞或URL地址內部進行換行。

CSS3 @font-face規則

@font-face屬性描述：

                 font-family：規定字型的名稱。

                 src：定義字型檔案的URL。

                font-style：定義字型的樣式。

                font-weight：定義字型粗細。

語法：  @font-face{                       

                font-family：myfirstfont。

                 src：url（sansation_bold.ttf）;

                font-weight：bold;         

}