使用CSS3產生圓角美化網站

還沒有CSS3的時候,要讓網站的表格圓角化,需要載入使用JQuery Corner Plugin來達到效果,前提還必須把瀏覽器的Javascript打開,現在各家瀏覽器都支援CSS3(不含IE8以前的版本),只要使用簡單的語法就可以達到圓角效果。


CSS3的圓角效果主要是用「border-radius」基本語法,如果要支援Chrome是「-webkit-border-radius」,Firefox則是「-moz-border-radius」,所以同時使用這3個語法來支援各家瀏覽器(不含IE8以前的版本),至於4個角都設定同一個角度或設定各別不同的角度,語法則大同小異,以下介紹使用方法:

  1. 4個角都設定同一個角度:
    border-radius: 10px; /*基本語法*/
    -webkit-border-radius: 10px; /*支援Chrome*/
    -moz-border-radius: 10px; /*支援Firefox*/
  2. 4個角設定各別不同的角度:
    border-top-left-radius: 10px; /*top-left為左上角*/
    -webkit-border-top-left-radius: 10px;
    -moz-border-top-left-radius: 10px; 
    border-top-right-radius: 20px; /*top-right為右上角*/
    -webkit-border-top-right-radius: 20px;
    -moz-border-top-right-radius: 20px; 
    border-bottom-left-radius: 30px; /*bottom-left為左下角*/
    -webkit-border-bottom-left-radius: 30px;
    -moz-border-bottom-left-radius: 30px;
    border-bottom-right-radius: 40px; /*bottom-right為右下角*/
    -webkit-border-bottom-right-radius: 40px;
    -moz-border-bottom-right-radius: 40px;

下面是原木將2010〜2017的Wordpress部落格版面圓角化前、後的對照圖,圓角化的視覺上就是讓人看了舒心,歡迎大家到 http://once.beau.tw 坐坐,看看圓角化後的部落格,由於剛接觸 Joomla,所以目前正在研究如何將 Joomla 的佈景及sidebarright圓角化,還請先進們若看到此篇文章提點提點,感謝〜

20170621.jpg

如果懶得打這麼多繁複的語法,也可以利用 CSS Border Radius Generato 網站,只要在4個角輸入所需要的圓角半徑,就會自動產生CSS3的語法哦。

Border Radius網址:http://border-radius.com

文章收藏
给本項目評分
(0 得票數)
閱讀 529 次數 最後修改於 週三, 21 六月 2017 21:06
發佈於 線上筆記
來源

回應 (0)

這篇文章還沒有任何回應,趕快來分享你的意見哦 ^^

留下你的回應

你可以用【訪客】身份回應, 或使用上面的『快速選單』來登入或註冊帳號。
0 字元
附件 (0 / 3)
Share Your Location