3.CSS3背景
CSS3 background中包含幾個新的背景屬性，提供更大背景元素控制。
主要有兩個背景屬性：
1) background-size:
background-size規定背景圖片的尺寸（以像素或者百分比規定尺寸），如果以百分比規定尺寸，尺寸相對於父元素的寬度和高度。
.background-size{
background:url(bg_hling.png);
-moz-background-size:100px 40px; /* 老版本的 Firefox */
-webkit-background-size:100px 40px;
background-size:40% 100%;
background-repeat:no-repeat;
}2) CSS3 background-origin屬性
background-origin屬性規定背景圖片的定位區域。
背景圖片可以放置於content-box、padding-box或者boeder-box區域。
//在border-box區域內放置背景圖片：
.background-origin-border{
width: 250px;
height: 250px;
border: 1px dotted green;
padding: 25px;
background-image: url('./images/border.png');
background-repeat:no-repeat;
background-position: left;
background-origin: border-box;
}//在content-box區域內放置背景圖片：
.background-origin-content{
width: 250px;
height: 250px;
border: 1px dotted green;
padding: 25px;
background-image: url('./images/border.png');
background-repeat:no-repeat;
background-position: left;
background-origin: content-box;
}4.字體
在 CSS3 之前，web 設計師必須使用已在用戶計算機上安裝好的字體。通過 CSS3，web 設計師可以使用他們喜歡的任意字體。
Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 類型的字體。Internet Explorer 9+ 支持新的 @font-face 規則，但是僅支持 .eot 類型的字體 (Embedded OpenType)。
在@font-face規則中，您必須首先定義字體的名稱，然後指向該字體文件fontawesome-webfont.woff
@font-face{ //@font-face聲明自定義字體
font-family: 'FontAwesome';
src:url('font/fontAwesome-webfont.woff');
//fontAwesome-webfont.woff字體類型文件
}
.font6{
font-family: 'FontAwesome',sans-serif;
font-size: 14px;
color: pink;
line-height: 1.3em;
}****CSS中字體系列屬性：
font:
font-style|font-variant|font-weight|font-size/line-height|font-familyfont-family:
字體族,如果瀏覽器不支持第一個字體，則會嘗試下一個。也就是說，font-family 屬性的值是用於某個元素的字體族名稱或/及類族名稱的一個優先表。瀏覽器會使用它可識別的第一個值。
有兩種類型的字體系列名稱：
1)指定的系列名稱：具體字體的名稱，比如：”times”、”courier”、”arial”;
2)通常字體系列名稱：比如：”serif”、”sans-serif”、”cursive”、”fantasy”、”monospace”,”Times New Roman”,Georgia,Serif;
body {font-family: sans-serif;}font-style
最常用於規定斜體文本。用於在 normal 文本（顯示正常文本）、italic 文本（顯示文本斜體）和 oblique 文本（顯示文本傾斜）之間選擇。
font-weight
設置文本的粗細，使用bold關鍵字可以將文本設置爲粗體。
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}font-size
設置文本的大小，font-size 值可以是絕對或相對值。
絕對值：將文本設置爲指定的大小，不允許用戶在所有瀏覽器中改變文本大小，絕對大小確定了輸出的物理尺寸時很有用。
相對大小：相對於周圍的元素來設置大小，允許用戶在瀏覽器改變文本大小。
通過以下來設置字體大小：
1.使用像素來設置字體大小：像素設置文本大小，可以對文本大小進行完全控制。
h1 {font-size:60px;}2.使用em設置字體大小：1em 等於當前的字體尺寸。如果一個元素的 font-size 爲 16 像素，那麼對於該元素，1em 就等於 16 像素。在設置字體大小時，em 的值會相對於父元素的字體大小改變。瀏覽器中默認的文本大小是 16 像素。因此 1em 的默認尺寸是 16 像素。
h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;} /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */3.結合使用百分比和em：在所有瀏覽器中均有效的方案是爲 body 元素（父元素）以百分比設置默認的 font-size 值：
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}font-variant
把段落設置爲小型大寫字母字體（不是很常用）
5.CSS3 用戶頁面（UI）
在 CSS3 中，新的用戶界面特性包括重設元素尺寸、盒尺寸以及輪廓等。
在本章中，您將學到以下用戶界面屬性：
resize|box-sizing|outline-offset
Resize
在 CSS3，resize 屬性規定是否可由用戶調整元素尺寸。
div{
resize:both;
overflow:auto;
}ps:如果希望此屬性生效，需要設置元素的 overflow 屬性，值可以是 auto、hidden 或 scroll。
resize: none|both|horizontal|vertical;box-sizing
box-sizing 屬性允許您以確切的方式定義適應某個區域的具體內容。JavaScript中語法爲object.style.boxSizing=”border-box”。
box-sizing: content-box|border-box|inherit;content-box：寬度和高度分別應用到元素的內容框，在寬度和高度之外繪製元素的內邊距和邊框。
border-box：爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製，通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
inherit：規定應從父元素繼承 box-sizing 屬性的值。
outline-offset
outline-offset 屬性對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。輪廓與邊框有兩點不同：輪廓不佔用空間、輪廓可能是非矩形。
屬性彙總：
6.過渡效果
CSS3過渡是元素從一種樣式逐漸改變爲另一種的效果。儘管CSS3過渡效果是足夠的過渡的一個元素，但text-transform屬性可以提高CSS3過渡效果的風格。
主要介紹以下四個屬性：
1）translation-property
規定應用過渡的CSS屬性的名稱。過渡效果通常在用戶將鼠標指針浮動到元素上時發生。property定義應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔。
transition-property: none|all|property;2）transition-duration
定義過渡效果花費的時間，默認爲0.時間單位可以是秒或者毫秒。
transition-duration: time;3）translation-timing-function
規定過渡效果的時間曲線，默認值是“ease”。
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
4）transition-delay
規定過渡效果何時開始，默認是0。
transition-delay: time;
