最近,在改網站的版面,想要製作圓角,有找到兩種方法可以達成目的。
第一種是利用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
1 2 3 |
#contain_out { border-radius:10px; /*設定四個角*/ } |
1 2 3 4 5 6 |
#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為右下角*/ } |