最近，在改網站的版面，想要製作圓角，有找到兩種方法可以達成目的。
第一種是利用CSS3的element來達成，可是，目前，IE8(含)之前的瀏覽器，不支援CSS3。所以，就算加上了CSS上去，使用IE8之前瀏覽器的使用者，還是看不到。另一個方法就是使用JQuery，但是前提是使用者沒有把瀏覽器關閉Javascript。
使用CSS
CSS3語法
- 設定四個角：border-radius
- 設定左上角：border-top-left-radius
- 設定右上角：border-top-right-radius
- 設定左下角：border-bottom-left-radius
- 設定右下角：border-bottom-right-radius
#contain_out {
border-radius:10px; /*設定四個角*/
}
#contain_out {
border-top-left-radius:10px; /*top-left為左上角*/
border-top-right-radius:10px; /*top-right為右上角*/
border-bottom-left-radius:10px; /*bottom-left為左下角*/
border-bottom-right-radius:10px; /*bottom-right為右下角*/
}
Firefox
- 設定四角：-moz-border-radius
- 設定左上角：-moz-border-radius-topleft
- 設定右上角：-moz-border-radius-topright
- 設定左下角：-moz-border-radius-bottomleft
- 設定右下角：-moz-border-radius-bottomright
#contain_out {
-moz-border-radius:10px ;
}
#contain_out {
-moz-border-radius-topleft: 10px; /* 設定左上角 */
-moz-border-radius-topright: 10px; /* 設定右上角 */
-moz-border-radius-bottomleft: 10px; /* 設定左下角 */
-moz-border-radius-bottomright: 10px; /*設定右下角 */
}
Google Chrome及Safari(Webkit)
- 設定四角：-webkit-border-radius
- 設定左上角：-webkit-border-top-left-radius
- 設定右上角：-webkit-border-top-right-radius
- 設定左下角：-webkit-border-bottom-left-radius
- 設定右下角：-webkit-border-bottom-right-radius
#contain_out {
-webkit-border-radius: 10px; /*設定四個角*/
}
#contain_out {
-webkit-border-top-left-radius: 10px; /* 設定左上角 */
-webkit-border-top-right-radius: 10px; /* 設定右上角 */
-webkit-border-bottom-left-radius: 10px; /* 設定左下角 */
-moz-border-radius-bottomright: 10px; /*設定右下角 */
}
JQuery
先至http://code.google.com/p/jquerycurvycorners/downloads/list 下載JQuery Plugin
下載完後，解壓縮後，放置到網頁目錄下
載入JQuery Corner Plugin，放到<head>…</head>之間
呼叫function，在 #contain_out 中，放入要進行圓角處理的id或class名稱
發佈留言