CSS3樣式實現盒子對象圓角、圖片圓角效果
一、CSS3之border-radius圓角 DIV盒子圓角 圖片圓角,CSS3樣式實現盒子對象圓角、圖片圓角效果。
1、DIVCSS3圓角單詞：
border-radius
2、語法結構
div{border-radius:5px}
設置DIV對象盒子四個角5像素圓角效果
div{border-radius:5px 0;}
設置DIV對象盒子左上角和右下角5px圓角，其它兩個角爲0不圓角
div{border-radius:5px 5px 0 0;}
設置DIV對象盒子左上角和右上角5px圓角，其它兩個角爲0不圓角
3、說明：
border-radius:3px 4px 5px 6px
代表設置對象左上角3px圓角、右上角4px圓角、右下角5px圓角、左下角6px圓角。
圓角邊框也可以使用百分比作爲單位，比如：將一個正方形的圓角邊框設置爲50%，那麼就會形成一個圓，不過使用百分比與像素並不能等效。
注意：百分比大於50%後，形狀就不會再變化了，圓角的半徑不能超過寬/高的一半。
二、邊框圖片 border-image
通過border-image 屬性，您可以使用圖片來創建邊框：
border-image 屬性允許您規定用於邊框的圖片！
使用圖片創建圍繞 div 元素的邊框：
div{border-image:url(border.png) 30 30 round;}
三、box-shadow 用於向方框添加陰影：
div{box-shadow: 10px 10px 5px #888888;}
四、text-shadow 可向文本應用陰影。
您能夠規定水平陰影、垂直陰影、模糊距離，以及陰影的顏色：
向標題添加陰影：
h1{text-shadow: 5px 5px 5px #FF0000;}
五、漸變效果（Gradients）
CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。
以前，你必須使用圖像來實現這些效果。但是，通過使用 CSS3 漸變（gradients），你可以減少下載的時間和寬帶的使用。此外，漸變效果的元素在放大時看起來效果更好，因爲漸變（gradient）是由瀏覽器生成的。
CSS3 定義了兩種類型的漸變（gradients）：
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
徑向漸變（Radial Gradients）- 由它們的中心定義
爲了創建一個線性漸變，你必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時，你也可以設置一個起點和一個方向（或一個角度）。
語法
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
從上到下的線性漸變：
#grad {background-image: linear-gradient(#e66465, #9198e5);}
從左到右的線性漸變：
#grad {height: 200px;background-image: linear-gradient(to right, red , yellow);}
線性漸變 - 對角
你可以通過指定水平和垂直的起始位置來製作一個對角漸變。
下面的實例演示了從左上角開始（到右下角）的線性漸變。起點是紅色，慢慢過渡到藍色：
從左上角到右下角的線性漸變：
#grad {height: 200px;background-image: linear-gradient(to bottom right, red, yellow);}
使用角度
如果你想要在漸變的方向上做更多的控制，你可以定義一個角度，而不用預定義方向（to bottom、to top、to right、to left、to bottom right，等等）。
語法
background-image: linear-gradient(angle, color-stop1, color-stop2);
角度是指水平線和漸變線之間的角度，逆時針方向計算。換句話說，0deg 將創建一個從下到上的漸變，90deg 將創建一個從左到右的漸變。
重複的線性漸變
repeating-linear-gradient() 函數用於重複線性漸變：
一個重複的線性漸變：
#grad {background-image: repeating-linear-gradient(red, yellow 10%, green 20%);}
CSS3 徑向漸變
徑向漸變由它的中心定義。
爲了創建一個徑向漸變，你也必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時，你也可以指定漸變的中心、形狀（圓形或橢圓形）、大小。默認情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）。
徑向漸變的實例：
Radial gradient
語法
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
徑向漸變 - 顏色結點不均勻分佈
顏色結點不均勻分佈的徑向漸變：
#grad {background-image: radial-gradient(red 5%, yellow 15%, green 60%);}
設置形狀
shape 參數定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。默認值是 ellipse。
形狀爲圓形的徑向漸變：
#grad {background-image: radial-gradient(circle, red, yellow, green);}
不同尺寸大小關鍵字的使用
size 參數定義了漸變的大小。它可以是以下四個值：
closest-side
farthest-side
closest-corner
farthest-corner
帶有不同尺寸大小關鍵字的徑向漸變：
#grad1 {background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);}
#grad2 {background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);}
重複的徑向漸變
repeating-radial-gradient() 函數用於重複徑向漸變：
一個重複的徑向漸變：
#grad {background-image: repeating-radial-gradient(red, yellow 10%, green 15%);}
五、通過 CSS3，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換爲另一種樣式時爲元素添加效果。
CSS3 過渡是元素從一種樣式逐漸改變爲另一種的效果。
要實現這一點，必須規定兩項內容：
1、規定您希望把效果添加到哪個 CSS 屬性上
2、規定效果的時長
div{transition: width 2s;}
註釋：如果時長未規定，則不會有過渡效果，因爲默認值是 0。
效果開始於指定的 CSS 屬性改變值時。CSS 屬性改變的典型時間是鼠標指針位於元素上時：
規定當鼠標指針懸浮於 <div> 元素上時：
div:hover{width:300px;}
註釋：當指針移出元素時，它會逐漸變回原來的樣式。
3、多項改變
如需向多個樣式添加過渡效果，請添加多個屬性，由逗號隔開：
向寬度、高度和轉換添加過渡效果：
div{transition: width 2s, height 2s, transform 2s;}
六、RGBA 顏色
RGBA 顏色值是 RGB 顏色值的擴展，帶有一個 alpha 通道 - 它規定了對象的不透明度。
RGBA 顏色值是這樣規定的：rgba(red, green, blue, alpha)。alpha 參數是介於 0.0（完全透明）與 1.0（完全不透明）的數字。
p{background-color:rgba(255,0,0,0.5);}
七、Outline Offset
outline-offset 屬性對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。
輪廓與邊框有兩點不同：
輪廓不佔用空間
輪廓可能是非矩形
這個 div 在邊框之外 15 像素處有一個輪廓。
規定邊框邊緣之外 15 像素處的輪廓：
div{border:2px solid black;outline:2px solid red;outline-offset:15px;}
八、CSS3 動畫
當您在 @keyframes 中創建動畫時，請把它捆綁到某個選擇器，否則不會產生動畫效果。
通過規定至少以下兩項 CSS3 動畫屬性，即可將動畫綁定到選擇器：
規定動畫的名稱
規定動畫的時長
把 "myfirst" 動畫捆綁到 div 元素，時長：5 秒：
div{animation: myfirst 5s;}
註釋：您必須定義動畫的名稱和時長。如果忽略時長，則動畫不會允許，因爲默認值是 0。
什麼是 CSS3 中的動畫？
動畫是使元素從一種樣式逐漸變化爲另一種樣式的效果。
您可以改變任意多的樣式任意多的次數。
請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。
0% 是動畫的開始，100% 是動畫的完成。
爲了得到最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。
當動畫爲 25% 及 50% 時改變背景色，然後當動畫 100% 完成時再次改變：
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
