css圓角(border-radius)介紹


以前我們要做網頁圓角時,最早是將圓角做成8張圖片,把table畫成九宮格去插入、去設背景;到現在好一些,可以將圓角切成2張圖用div去設定;或是用一堆的1px去定位、去堆疊

以往這樣切圖切到最後都會瘋掉,尤其是只是要一個單純的圓角。

幸好css3有了這一項新的技術,我們可以直接用語法設定圓角,不用再切一堆圖了。

css3公佈的圓角語法為border-radius,雖然現在還沒完全正式定案,但是已經有許多瀏覽器利用這個函式,一樣可以支援圓角語法。像是Mozilla類的-moz-border-radius以及WebKit類的-webkit-border-radius。以Mozilla為基底的瀏覽器,最典型的代表就是FireFox;而WebKit類的則是Safari以及Google Chrome。

res1 以下是border-radius在每個瀏覽器不同的語法表示:

CSS3(還未正式發佈) Mozilla WebKit 中文解說
border-radius -moz-border-radius -webkit-border-radius 整體圓角
border-topright-radius -moz-border-topright-radius -webkit-border-topright-radius 右上圓角
border-topleft-radius -moz-border-topleft-radius -webkit-border-topleft-radius 左上圓角
border-bottomright-radius -moz-border-bottomright-radius -webkit-border-bottomright-radius 右下圓角
border-bottomleft-radius -moz-border-bottomleft-radius -webkit-border-bottomleft-radius 左下圓角

PS.目前IE瀏覽器不支援css3的這些技術,未來要等IE9上市才會支援唷。

-moz-border-radius使用方法:

以下跟大家介紹要如何在網頁中使用border-radius。因為我使用的瀏覽器是FireFox,所以在此我以-moz-border-radius為例,如果想要在Safari應用,就將-moz-改為-webkit-即可。

語法: -moz-border-radius:10px;
設定四邊的圓角為10px。

語法: -moz-border-radius-topright:10px;-moz-border-radius-topleft:10px;
指定右上跟左上為10px。

語法: -moz-border-radius:10px 0;
border-radius同樣支援語法縮寫(左上10px/右上0/右下10px/左下0)。

語法: -moz-border-radius:10px 40px;
border-radius同樣支援語法縮寫(左上10px/右上40px/右下10px/左下40px)。

WebKit的特殊效果

-webkit-border-radius 針對圓角,還有做出陰影、旋轉等特殊的效果。好消息是FireFox 3.5也支援該功能,只要將-webkit改為-moz- 就可以直接使用。

語法: -moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.6);
頭兩個值(1px)設定位移點數,第三值(5px)則是柔邊。rgba依序填寫RGB三原色的數值。a是透明值(alpha),0.6表示60%透明。如果不會使用rgba,可以直接改用色碼(#ffffff)。

語法: -moz-transform: rotate(-5deg);
設定圓角的旋轉角度,正值是順時針,負值是逆時針。deg是角度的意思。

FireFox3.5 新技術

FireFox3.5版針對圓角,多了一個新的功能。這個新功能我還不太清楚要怎麼定義他,你可以想成是它可以針對一個邊角再產生二種圓角效果,詳細請看範例。

語法: -moz-border-radius: 40px / 10px;
使用/,可以讓該圓角先有40px的邊距,再有10px的邊距。

語法: -moz-border-radius-topleft: 40px 10px; -moz-border-radius-bottomright: 40px 10px;
可以設定指定的一個邊角,有兩種圓角效果。

語法: -moz-border-radius: 40px 10px 10px 40px / 11px 21px 11px 21px;
我們可以再針對四個不同的邊角去設定。




以上就是css圓角(border-radius)的一些介紹,現在也有愈來愈多人都在使用相關的技術代替圖片,讓自己的網頁更添活潑,也可以減少讀取圖片資源。

對以上教學如果有任何疑問,或發現有錯誤的地方,歡迎在底下留言討論,我會在最快的時間內回覆:)

You may also like...

38 Responses

  1. Beer 說道:

    這篇文超實用的~ 改天我再來試一下 :-D

  2. Carrie 說道:

    真的很實用啊~木子真是越來越強了!

    嗯,我改天也要來試試看你這個教學 :wink:

  3. muki 說道:

    @ Beer
    有成功要記得分享唷^^

    @ Carrie
    不過目前對IE類的瀏覽器都無效….對某些人來說可能算不上實用 :(
    但Carrie給我的鼓勵,讓我感到很窩心 :wink:

  4. 無法顯示網頁 說道:

    IE這玩意兒真的是很爛~ :lol:

  5. tony 說道:

    妳介紹的最後一個技術簡直太酷了!

    這可能平面或網頁設計師比較不熟,
    不過在3D、工程、產品領域裡,這是很常見的倒R方式之一。

  6. Sinchen 說道:

    很方便,但是該死的IE市占率最高,又不支援真他OOXX。

  7. 憶塵居 說道:

    IE爛死了,但它佔有率有超高。

  8. 小闇 說道:

    哇啊啊 :mrgreen:
    muki姊介紹的css真的很強大啊~
    某闇望塵莫及(咬手帕)

  9. muki 說道:

    @ 無法顯示網頁,@ 憶塵居
    對IE,我仍然保持不予置評的態度^^

    @ tony
    倒R這名詞我真的沒聽過
    果然對網頁設計師來說不太熟 哈。

    @ Sinchen
    那就一起等待IE9的到來吧:)

    @ 小闇
    哈哈~有空可以玩一玩
    css3蠻多新的東西,我以後會陸續介紹!!

  10. 小丑鱼♂ 說道:

    呵呵,谢谢Muki的分享,我跃跃欲试了 :wink:

  11. 小丑鱼♂ 說道:

    Muki,这个效果太赞了!CSS使用成功,来汇报·~~~ 8-O

  12. muki 說道:

    @ 小丑魚♂
    恭喜恭喜!!我剛好也在逛你的博客呢:P

  13. 拆組達人 說道:

    萬惡的IE6都不支援! :twisted:

  14. 殺氣 說道:

    謝謝拉 又學到了一項 收藏起來
    話說 沒有左下的語法而是右上重複了

    • Keli 說道:

      mağzamızda en kaliteli sex ürünleri, sex oyuncakları, erotik giyim ürünlerini bueleiabclğiniz gibi ayrıca, penis büyütücü, geciktirici, azdırıcı, ürünlerde temin edebilirsiniz. 2003 ten bu yana en kaliteli seks ürünlerini sağlamakta olan agor ta tüm sex ürünlerini temin edebilirsiniz.

  15. muki 說道:

    @ 拆組達人
    哈哈~

    @ 殺氣
    謝謝殺氣唷,我改好了 :wink:

  16. 說道:

    這個好棒喔
    可是怎摸用在痞客幫阿
    by the way好久不見了=)

  17. muki 說道:

    @兔
    好久不見!!
    直接在css裡頭做修改就可以囉

  18. 說道:

    原來IE情況看不到ㄚ :mrgreen:
    真是可惜我是IE使用者說..

    我也很久沒玩blog了都忙著玩遊戲工作到處瘋
    blog都荒廢了~~

    祝 新年快樂黑

  19. muki 說道:

    @兔
    是阿~因為IE還不支援CSS3,要等9版唷
    在玩什麼遊戲呀?
    你blog人氣那麼高要好好維持呢~~

    新年快樂^^

  20. 翻翻 說道:

    謝謝你!!你好厲害!!!

    我改plurk的語法改到很頭暈

    看到你的說明才知道哪裡寫錯了…

  21. muki 說道:

    @翻翻
    很高興有幫到你的忙 :wink:

  22. 翻翻 說道:

    不好意思我有兩個問題所以又出現了 Orz

    Q:個人慣用safari看噗浪
    可是不喜歡四個邊都是圓角
    所以就依照您所說的方法把-moz-border-radius:10px 0改成-webkit-border-radius:10px 0
    但是顯示出來還是方方的四個角
    好像是safari不能用出那種類似葉子的效果…
    請問有甚麼解決之道嗎?

    Q2:之前用的版型
    發噗時的"說"、"喜歡"、"覺得"都可以做出圓角效果
    可是研究了很久還不知道要從哪裡改…

    不好意思叨擾妳了

  23. 梅干扣肉 說道:

    沒for IE還是真頭痛~~~
    目前IE佔有率頗高~~
    還是得乖乖的用圖片好了~~

    祝版大新書大賣~~~~

  24. muki 說道:

    @翻翻
    你好,我沒有使用Safari瀏覽器,但是據我之前看到的資訊,他是webkit類的,所以這樣寫應該是OK。
    不然你就是要找一下其他網路的資料囉,很抱歉這部分沒辦法幫到你。

    另外關於噗浪的圓角,你可以在這邊設定看看:
    .qualifier, .m_qualifier, .segment-content, .dots .inner, #more_options_holder, #updater{}

    @ 梅干扣肉
    IE9快出了,慢慢等吧:P
    謝謝梅干^^

  25. ethan 說道:

    transform: rotate(-5deg);
    這不是給圓角專用的喔,任何標籤都可以用來旋轉!

    Webkit 還不支援圓角「上 右 下 左」的寫法,要一個一個寫出來才行。

  26. BoKeam 說道:

    這個圓角是不是不能通過W3C CSS的認證啊,我加了這個樣式後就出現了警告

  27. muki 說道:

    @ BoKeam
    好問題!!!!
    我記得border-radius是w3c的規範,但是因為沒有正式發布,所以加上-moz- or -webkit- 好像就不行。
    以上是我猜測…我有空會找找資料的 :oops:
    謝謝提醒

  28. alan 說道:

    :-D 謝謝,超實用的教學~!

  29. The catchy blog with the interesting contents. You give the nice information. most of your contents are make me have more knowledge. it is very different. I was impressed with your blog. Never be bored to visit your website again. Have the nice day. Keep enjoyed your blogging.

  30. Kai 說道:

    很實用的內容,謝謝作者的整理!

  31. 瓦斯爐 說道:

    css圓角在ie8上的問題就要用到 PIE.htc 這個檔案…跟宏達電是沒有關係的…
    http://css3pie.com/

  32. roket sex 說道:

    好問題!!!!
    我記得border-radius是w3c的規範,但是因為沒有正式發布,所以加上-moz- or -webkit- 好像就不行。
    以上是我猜測…我有空會找找資料的 :oops:
    謝謝提醒

  33. buy rdp 說道:

    buy rdp online

  34. 88必发官网 說道:

    各种乱入,是怎么回事呢!沙发都被你们弄没了!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>