利用CSS或JQuery製作邊框圓角

最近,在改網站的版面,想要製作圓角,有找到兩種方法可以達成目的。
第一種是利用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名稱


 

參考資料

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料