想找資料嗎？到這看看也許會有收穫喔。
‧wordpress: 佈景主題 / 插件介紹 #
‧網站教學 : css新手必看 / css筆記 / seo
‧電影片單 : 驚悚 / 懸疑 / 靈異 / 動作 / 文藝 / 劇情 / 喜劇 / 紀錄 / 科幻 / 史詩 / 戰爭 / 動畫
2009/12/12

語法 | 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-top-right-radius -moz-border-top-right-radius -webkit-border-top-right-radius 右上圓角
border-top-left-radius -moz-border-top-left-radius -webkit-border-top-left-radius 左上圓角
border-bottom-right-radius -moz-border-bottom-right-radius -webkit-border-bottom-right-radius 右下圓角
border-bottom-left-radius -moz-border-bottom-left-radius -webkit-border-bottom-left-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)的一些介紹，現在也有愈來愈多人都在使用相關的技術代替圖片，讓自己的網頁更添活潑，也可以減少讀取圖片資源。

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

Related Posts with Thumbnails
迴響(24筆)
分類:css語法.筆記
人氣:1,596    
  • 引用網址：
  • 文章標籤：,
  • 上篇文章：
  • 下篇文章：

      • comments(24)
    1. Beer
      #1
      Beer//LV.8
      reply
      2009/12/12

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

    2. Carrie
      #2
      Carrie//LV.33
      reply
      2009/12/12

      真的很實用啊～木子真是越來越強了！

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

    3. muki
      #3
      muki//LV.953
      reply
      2009/12/12

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

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

    4. 無法顯示網頁
      #4
      無法顯示網頁//LV.8
      reply
      2009/12/13

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

    5. tony
      #5
      tony//LV.16
      reply
      2009/12/13

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

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

    6. Sinchen
      #6
      Sinchen//LV.23
      reply
      2009/12/13

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

    7. 憶塵居
      #7
      憶塵居//LV.2
      reply
      2009/12/14

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

    8. 小闇
      #8
      小闇//LV.19
      reply
      2009/12/14

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

    9. muki
      #9
      muki//LV.953
      reply
      2009/12/14

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

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

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

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

    10. 小丑鱼♂
      #10
      小丑鱼♂//LV.12
      reply
      2009/12/15

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

    11. 小丑鱼♂
      #11
      小丑鱼♂//LV.12
      reply
      2009/12/15

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

    12. muki
      #12
      muki//LV.953
      reply
      2009/12/15

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

    13. 拆組達人
      #13
      拆組達人//LV.48
      reply
      2009/12/24

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

    14. 殺氣
      #14
      殺氣//LV.4
      reply
      2009/12/26

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

    15. muki
      #15
      muki//LV.953
      reply
      2009/12/27

      @ 拆組達人
      哈哈~

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

    16. 兔
      #16
      兔//LV.2
      reply
      2009/12/27

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

    17. muki
      #17
      muki//LV.953
      reply
      2009/12/29

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

    18. 兔
      #18
      兔//LV.2
      reply
      2009/12/31

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

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

      祝 新年快樂黑

    19. muki
      #19
      muki//LV.953
      reply
      2010/01/01

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

      新年快樂^^

    20. 用CSS設定陰影和圓角 « 說些事
      #20
      用CSS設定陰影和圓角 « 說些事
      reply
      2010/01/14
    21. 翻翻
      #21
      翻翻//LV.2
      reply
      2010/03/17

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

      我改plurk的語法改到很頭暈

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

    22. muki
      #22
      muki//LV.953
      reply
      2010/03/17

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

    23. 翻翻
      #23
      翻翻//LV.2
      reply
      2010/03/17

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

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

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

      不好意思叨擾妳了

    24. 梅干扣肉
      #24
      梅干扣肉//LV.1
      reply
      2010/03/18

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

      祝版大新書大賣～～～～

    comments(24)



    :wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: