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;}
}