CSS3 模組

CSS3被拆分為"模組"。舊規範已拆分成小塊，還增加了新的。

一些最重要CSS3模組如下：

• 選擇器
• 盒模型
• 背景和邊框
• 文字特效
• 2D/3D轉換
• 動畫
• 多列布局
• 使用者介面

一.CSS3 邊框

用 CSS3，你可以建立圓角邊框，新增陰影框，並作為邊界的形象而不使用設計程式。

邊框屬性：

• border-radius（圓角屬性）eg:{border:2px solid;border-radius:25px;}
  
• box-shadow（新增陰影） eg:{box-shadow: 10px 10px 5px #888888;}
• border-image（圖片作為邊框）eg:{border-image:url(border.png) 30 30 round;}

二.CSS3 背景

CSS3 中包含幾個新的背景屬性，提供更大背景元素控制。

• background-image(新增背景圖片) 【CSS3 允許你在元素上新增多個背景影象】
• background-size(指定背景影象的大小)
• background-origin（指定了背景影象的位置區域）
• background-clip（背景剪裁屬性是從指定位置開始繪製）

三.CSS3 漸變（gradients）

CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。以前，你必須使用影象來實現這些效果。但是，通過使用 CSS3 漸變（gradients），你可以減少下載的時間和寬頻的使用。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。

CSS3 定義了兩種型別的漸變（gradients）：

• 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向（background-image: linear-gradient(direction, color-stop1, color-stop2, ...);）
  
• 徑向漸變（Radial Gradients）- 由它們的中心定義（background-image: radial-gradient(shape size at position, start-color, ..., last-color);）

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);   // css3線性漸變語法
background-image: linear-gradient(#e66465, #9198e5); // 從上到下的線性漸變
background-image: linear-gradient(to right, red , yellow); //從左到右的線性漸變
background-image: linear-gradient(to bottom right, red, yellow); //從左上角到右下角的線性漸變

background-image: linear-gradient(angle, color-stop1, color-stop2); // 使用角度語法
background-image: linear-gradient(-90deg, red, yellow); //帶有指定的角度的線性漸變
background-image: linear-gradient(red, yellow, green); //帶有多個顏色節點的從上到下的線性漸變
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); //如何建立一個帶有彩虹顏色和文字的線性漸變
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));//從左到右的線性漸變，帶有透明度
background-image: repeating-linear-gradient(red, yellow 10%, green 20%); //repeating-linear-gradient() 函式用於重複線性漸變

background-image: radial-gradient(shape size at position, start-color, ..., last-color);//CSS3 徑向漸變語法
background-image: radial-gradient(red, yellow, green); //顏色節點均勻分佈的徑向漸變
background-image: radial-gradient(red 5%, yellow 15%, green 60%); //顏色節點不均勻分佈的徑向漸變
background-image: radial-gradient(circle, red, yellow, green);// 形狀為圓形的徑向漸變
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);//帶有不同尺寸大小關鍵字的徑向漸變 (
                                                                                                            closest-side
                                                                                                            farthest-side
                                                                                                            closest-corner
                                                                                                            farthest-corner
                                                                                                            )
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);//一個重複的徑向漸變
 

四.CSS3 文字效果

CSS3中包含幾個新的文字特徵。

• text-shadow（適用於文字陰影）eg:{text-shadow: 5px 5px 5px #FF0000;}您指定了水平陰影，垂直陰影，模糊的距離，以及陰影的顏色：
• box-shadow （適用於盒子陰影）eg:{box-shadow: 10px 10px 5px #888888;}
• text-overflow（CSS3文字溢位屬性指定應向用戶如何顯示溢位內容）

p.test1 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip; 
}
 
p.test2 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis; 
}

• word-wrap（允許長文字換行）eg:{word-wrap:break-word;}
• word-break（CSS3 單詞拆分換行屬性指定換行規則）

p.test1 {
    word-break: keep-all;
}
 
p.test2 {
    word-break: break-all;
}

五.CSS3字型

CSS3 @font-face 規則

使用CSS3，當你發現您要使用的字型檔案時，只需簡單的將字型檔案包含在網站中，它會自動下載給需要的使用者。您所選擇的字型在新的CSS3版本有關於@font-face規則描述。您"自己的"的字型是在CSS3 @font-face規則中定義的。

<style> 
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
 
div
{
    font-family:myFirstFont;
}
</style>