目錄

• 1、邊框
• 2、背景
• 3、文本
• 4、字體
• 5、轉換
• 6、過渡
• 7、動畫
• 8、多列
• 9、自定義尺寸

CSS 用於控制網頁的樣式和布局，而 CSS3 是最新的 CSS 標準，這篇文章將著重介紹 CSS3 中出現的新特性，以及它們的使用方法

1、邊框

（1）圓角邊框

可以使用 border-radius 屬性用於創建圓角邊框，其接受長度值作為參數，一般情況下，我們需要指定 4 個值分別對應 top-left、top-right、bottom-right、bottom-left 四個方向，但是運用 值賦值

其規則如下：

• 如果省略 bottom-left，則使用 top-right 代替
• 如果省略 bottom-right，則使用 top-left 代替
• 如果省略 top-right，則使用 top-left 代替

也就是說：

• 若提供四個值，則分別設置 top-left、top-right、bottom-right、bottom-left
• 若提供三個值，則第一個設置 top-left，第二個設置 top-right 和 bottom-left，第三個設置 bottom-right
• 若提供兩個值，則第一個設置 top-left 和 bottom-right，第二個設置 top-right 和 bottom-left
• 若提供一個值，則同時設置 top-left、top-right、bottom-right、bottom-left

如果希望為某一方向單獨創建圓角邊框，則可以使用 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius 分別設置

div {
    text-align:center;
    color:#000000;
    background-color:#dddddd;
    padding:10px 40px;
    width:350px;
    height:20px;
    border:2px solid #a1a1a1;
    border-radius:25px;
}
 

（2）邊框陰影

可以使用 box-shadow 屬性向邊框添加一個或多個陰影，該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定，省略長度的值是 0

• h-shadow：必需，水平陰影的位置
• v-shadow：必需，垂直陰影的位置
• blur：可選，模糊距離
• spread：可選，陰影尺寸
• color：可選，陰影顏色
• inset：可選，將外部陰影改為內部陰影

div {
    width:350px;
    height:100px;
    background-color:#87CEEB;
    box-shadow: 10px 10px 5px #888888; /* h-shadow v-shadow blur color */
}

（3）邊框圖片

可以使用 border-image 屬性利用圖片創建邊框，它是一個簡寫屬性，用於設置以下的屬性：

• border-image-source：圖片路徑
• border-image-slice：圖片邊框向內偏移
• border-image-width：圖片邊框的寬度
• border-image-outset：邊框圖像區域超出邊框的量
• border-image-repeat：像邊框是否應該平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)

div {
    border:10px solid transparent; /* 必須設置 border 屬性，否則默認無邊框 */
    width:350px;
    height:20px;
    padding:10px 20px;
    -webkit-border-image:url(......) 30 30 round; /* Safari and Chrome */
    -moz-border-image:url(......) 30 30 round; /* Old Firefox */
    -o-border-image:url(......) 30 30 round; /* Opera */
    /* Internet Explorer 不支持 border-image 屬性 */
    border-image:url(......) 30 30 round;
}

2、背景

（1）背景尺寸

可以使用 background-size 屬性規定背景圖片的尺寸，在 CSS3 之前，背景圖片的尺寸是由圖片的實際尺寸決定的，而在 CSS3 中，可以規定背景圖片的尺寸，其可選值如下：

• 長度值：設置背景圖像的高度和寬度，第一個值設置寬度，第二個值設置高度，如果只設置一個值，則第二個值會被設置為 auto
• 百分數值：根據父元素的百分比來設置背景圖像的寬度和高度，第一個值設置寬度，第二個值設置高度，如果只設置一個值，則第二個值會被設置為 auto
• cover：把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域
• contain：把背景圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域

（2）定位區域

可以使用 background-origin 屬性規定 background-position 屬性相對於什麽位置來定位，其可選值如下：

• padding-box：背景相對於內邊距框定位
• border-box：背景相對於邊框盒定位
• content-box：背景相對於內容框定位

div {
    padding:30px;
    border:1px solid black;
    background-image:url(......);
    background-repeat:no-repeat;
    background-origin:content-box;
    background-position:left;
}

（3）繪制區域

可以使用 background-clip 屬性規定背景的繪制區域，其可選值如下：

• padding-box：背景被裁剪到內邊距框
• border-box：背景被裁剪到邊框盒
• content-box：背景被裁剪到內容框

div {
    width:300px;
    height:300px;
    padding:30px;
    border:1px solid black;
    background-color:pink;
    background-clip:content-box;
}

3、文本

（1）文本陰影

可以使用 text-shadow 屬性設置文本陰影效果，該屬性是逗號分隔的陰影列表，每個陰影有兩個或三個長度值和一個可選的顏色值進行規定，省略的長度值是 0

• h-shadow：必需，水平陰影的位置
• v-shadow：必需，垂直陰影的位置
• blur：可選，模糊距離
• color：可選，陰影顏色

h1 {
    text-shadow: 5px 5px 5px #888888;
}

（2）文本修剪

可以使用 text-overflow 屬性規定當文本溢出包含元素時發生的事情，其可選值如下：

• clip：直接修剪文本
• ellipsis：顯示省略符號來代表被修剪的文本
• string：顯示給定的字符串來代表被修剪的文本

4、字體

在 CSS3 出現之前，必須使用已經在用戶計算機上安裝好的字體，但是通過 CSS3，可將需要使用的字體文件存放到服務器上，它會在需要時自動下載到用戶計算機上，其在 @font-face 規則中定義

@font-face 規則中必須首先定義字體名稱，然後指向字體文件

@font-face {
    font-family: fontName;
    src: url(......);
}

然後在 HTML 中通過 font-family 屬性引用字體名稱

div {
    font-family:fontName;
}

如果需要使用粗體文本，則需要包含另一個描述符的 @font-face

@font-face {
    font-family: fontName;
    src: url(......);
    font-weight: bold;
}

5、轉換

（1）基本轉換

可以通過 transform 屬性使元素改變形狀、尺寸和位置，其接受一個轉換方法並在方法中指定值

下面提及的 X 軸是平行於屏幕水平向右，Y 軸是指平行於屏幕垂直向下，Z 軸是垂直於屏幕指向外側

平移方法

• translate3d(x,y,z)：三維，參數為三個長度值，分別確定元素在 X 軸、Y 軸和 Z 軸的平移距離
• translate(x,y)：二維，參數為兩個長度值，分別確定元素在 X 軸和 Y 軸上的平移距離
• translateX(x)：參數為一個長度值，確定元素在 X 軸上的平移距離
• translateY(y)：參數為一個長度值，確定元素在 Y 軸上的平移距離
• translateZ(z)：參數為一個長度值，確定元素在 Z 軸上的平移距離

縮放方法

• scale3d(x,y,z)：三維，參數為三個數值，分別確定元素在 X 軸、Y 軸和 Z 軸上的縮放倍數
• scale(x,y)：二維，參數為兩個數值，分別確定元素在 X 軸和 Y 軸上的縮放倍數
• scaleX(x)：參數為一個數值，確定元素在 X 軸上的縮放倍數
• scaleY(y)：參數為一個數值，確定元素在 Y 軸上的縮放倍數
• scaleZ(z)：參數為一個數值，確定元素在 Z 軸上的縮放倍數

旋轉方法

• rotate3d(x,y,z,n)：三維，從 (0,0,0) 指向 (x,y,z) 構成旋轉軸，然後將左手拇指指向旋轉軸正向，此時用四指繞行方向確定旋轉方向，n 值確定旋轉角度
• rotate(n)：二維，參數為一個角度值，若為正數，則順時針旋轉，若為負數，則逆時針旋轉
• rotateX(x)：參數為一個角度值，確定元素沿 X 軸的旋轉角度
• rotateY(y)：參數為一個角度值，確定元素沿 Y 軸的旋轉角度
• rotateZ(z)：參數為一個角度值，確定元素沿 Z 軸的旋轉角度

翻轉方法

• skew(x,y)：參數為兩個角度值，分別確定元素沿 X 軸和 Y 軸的翻轉角度
• skewX(x)：參數為一個角度值，確定元素沿 X 軸的翻轉角度
• skewY(y)：參數為一個角度值，確定元素沿 Y 軸的翻轉角度

div {
    transform: translate(50px,100px);
    -o-transform: translate(50px,100px);        /* Opera */
    -ms-transform: translate(50px,100px);       /* IE 9 */
    -moz-transform: translate(50px,100px);      /* Firefox */
    -webkit-transform: translate(50px,100px);   /* Safari and Chrome */
}

（2）旋轉基點

transform-origin 屬性需要配合 transform 屬性一同使用，用於設置旋轉元素的基點位置，使用格式如下：transform-origin: x-axis y-axis z-axis;

• x-axis：定義視圖在 X 軸的位置，可選值有 left、center、right、長度值、百分數值
• y-axis：定義視圖在 Y 軸的位置，可選值有 left、center、right、長度值、百分數值
• z-axis：定義視圖在 Z 軸的位置，可選值有 長度值

（3）背面可見性

可以使用 backface-visibility 屬性定義當元素不面向屏幕時的可見性，如果不希望看到旋轉元素的背面時，可使用該屬性，其可選值有兩個：

• visible：背面可見
• hidden：背面不可見

6、過渡

通過 CSS3，我們可以在不使用 Flash 或 JavaScript 的情況下，使得元素從一種樣式變換為另一種樣式時添加過渡效果

（1）屬性名稱

可以使用 transition-property 屬性規定應用過渡效果的 CSS 屬性名稱，當指定的 CSS 屬性改變時，過渡效果開始作用，其可選值如下：

• none：默認值，沒有屬性獲得過渡效果
• all：所有屬性獲得過渡效果
• 名稱列表：定義應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔

（2）作用時間

可以使用 transition-duration 屬性規定過渡效果的速度時間，其接受一個時間值，默認為 0，因此在使用過渡效果時，必須要設置 transition-duration 屬性，否則將看不到過渡效果

（3）作用速度

可以使用 transition-timing-function 屬性規定過渡效果的速度曲線，其可選值如下：

• linear：以相同的速度從開始至結束
• ease：默認值，以慢速開始，然後變快，以慢速結束
• ease-in：以慢速開始
• ease-out：以慢速結束
• ease-in-out：以慢速開始，以慢速結束
• cubic-bezier(n,n,n,n)：自定義，n 是 0 ~ 1 之間的數值

（4）延遲時間

可以使用 transition-delay 屬性規定延遲過渡效果的開始，其接受一個時間值，默認為 0

（5）簡寫屬性

為了方便，可以僅在 transition 屬性中設置所有有關過渡效果的屬性，設置的順序如下：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

div {
    width:100px;
    height:100px;
    background:blue;
    transition:width 2s;
    -o-transition:width 2s; /* Opera */
    -moz-transition:width 2s; /* Firefox */
    -webkit-transition:width 2s; /* Safari and Chrome */
}

div:hover {
    width:300px;
}

/* 當鼠標停留在 div 元素上時，其寬度將會變化，從而產生過渡效果 */

7、動畫

通過 CSS3，我們可以在不使用 Flash 或 JavaScript 的情況下，使為網頁創建動畫。我們可以通過 @keyframes 規則創建動畫，如果在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改變為新樣式的動畫效果

（1）動畫名稱

可以使用 animation-name 屬性規定動畫名稱，其可選值有兩個：

• none：無動畫，可用於覆蓋來自級聯的動畫

• 名稱：定義創建動畫的 keyframe 名稱

（2）播放時間

可以使用 animation-duration 屬性規定動畫完成一個周期所需時間，其接受一個時間值，默認為 0，因此在使用動畫時，必須要設置 animation-duration屬性，否則將看不到動畫

（3）播放速率

可以使用 animation-timing-function 屬性規定過渡效果的速度曲線，其可選值如下：

• linear：以相同的速度從開始至結束
• ease：默認值，以慢速開始，然後變快，以慢速結束
• ease-in：以慢速開始
• ease-out：以慢速結束
• ease-in-out：以慢速開始，以慢速結束
• cubic-bezier(n,n,n,n)：自定義，n 是 0 ~ 1 之間的數值

（4）延遲時間

可以使用 animation-delay 屬性規定延遲過渡效果的開始，其接受一個時間值，默認為 0

（5）播放次數

可以使用 animation-iteration-count 屬性規定動畫的播放次數，其接受一個數字，默認是 1；或者設置為 infinite，表示無限次播放

（6）播放方向

可以使用 animation-direction 屬性規定動畫下一周期的播放方向，其可選值如下：

• normal：默認值，正常播放
• alternate：輪流反向播放

（7）播放狀態

可以使用 animation-play-state 屬性規定動畫的播放狀態，其可選值如下：

• running：默認值，正在播放
• paused：暫停

（8）間隙可見性

可以使用 animation-fill-mode 屬性規定動畫在播放之前或之後效果的可見性，其可選值如下：

• none：不改變默認行為
• forwards：在動畫完成之後，保持最後屬性值（在最後一個關鍵幀中定義）
• backwards：在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）
• both：在動畫顯示之前應用開始屬性值，在動畫完成之後保持最後屬性值

（9）簡寫屬性

為了方便，可以僅在 animation 屬性中設置所有有關動畫的屬性，設置的順序如下：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

div {
    width:100px;
    height:100px;
    background:red;
    position:relative;
    nimation:test 2s linear infinite alternate;
    /*Safari and Chrome*/
    -webkit-animation:test 2s linear infinite alternate; 
}

@keyframes test {
    from {left:0px;}
    to {left:200px;}
}

/*Safari and Chrome*/
@-webkit-keyframes test {
    from {left:0px;}
    to {left:200px;}
}

8、多列

（1）列數

可以使用 column-count 屬性確定劃分的列數，其可選值如下：

• 數值：自定義需要劃分的列數
• auto：默認值，由其他屬性自動決定列數

（2）間隔

可以使用 column-gap 屬性確定列間間隔，其可選值如下：

• 長度值：規定列間間隔為指定長度
• normal：規定列間間隔為一個常規間隔，W3C 的建議值是 1em

（3）樣式

可以使用 column-rule 屬性確定列間樣式，它是一個簡寫屬性，包含以下屬性：

• column-rule-color：設置列間顏色規則，其接受一個顏色值
• column-rule-width：設置列間寬度規則，其可選值如下：
  • thin：纖細寬度
  • medium：中等寬度
  • thick：寬厚寬度
  • 長度值：自定義寬度
• column-rule-style：設置列間樣式規則，其可選值如下：
  • none：沒有樣式
  • hidden：隱藏樣式
  • dotted：點狀樣式
  • dashed：虛線樣式
  • solid：實線樣式
  • double：雙線樣式
  • groove：3D grooved 樣式，效果取決於寬度和顏色值
  • ridge：3D ridged 樣式，效果取決於寬度和顏色值
  • inset：3D inset 樣式，效果取決於寬度和顏色值
  • outset：3D outset 樣式，效果取決於寬度和顏色值

（4）列寬

可以使用 column-width 屬性確定列的寬度，其可選值如下：

• 長度值：自定義列寬
• auto：默認值，由瀏覽器自動決定列寬

9、自定義尺寸

resize 屬性規定是否由用戶調整元素的尺寸，其可選值如下：

• none：用戶無法調整元素的尺寸
• horizontal：用戶可調整元素的寬度
• vertical：用戶可調整元素的高度
• both：用戶可調整元素的高度和寬度

註意，在使用此屬性前必須先設置 overflow 屬性，其值可以是 auto、hidden 或 scroll

div {
    border:1px solid;
    width:350px;
    height:20px;
    padding:10px 40px; 
    overflow:auto;
    resize:both;
}

CSS學習筆記之CSS3新特性