MUKI space*

Simple, Personal and Life Style

星期六
12/12
2009

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)的一些介紹,現在也有愈來愈多人都在使用相關的技術代替圖片,讓自己的網頁更添活潑,也可以減少讀取圖片資源。

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



如果你喜歡我的文章,歡迎贊助我 :)
  • http://ibeeer.com Beer

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

  • http://blogs.carrielis.com Carrie

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

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

  • http://www.mukispace.com muki

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

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

  • http://www.james-only.com 無法顯示網頁

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

  • http://tdesign.tw/ tony

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

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

  • http://scl13.com Sinchen

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

  • http://www.dourge.cn 憶塵居

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

  • http://rinkaiten.zombie.jp/yamirogu/ 小闇

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

  • http://www.mukispace.com muki

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

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

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

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

  • http://www.konecy.cn 小丑鱼♂

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

  • http://www.konecy.cn 小丑鱼♂

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

  • http://www.mukispace.com muki

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

  • http://blog.iegoffice.com/ 拆組達人

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

  • http://shachi.net.ru 殺氣

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

  • http://www.mukispace.com muki

    @ 拆組達人
    哈哈~

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

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

  • http://www.mukispace.com muki

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

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

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

    祝 新年快樂黑

  • http://www.mukispace.com muki

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

    新年快樂^^

  • Pingback: 用CSS設定陰影和圓角 « 說些事

  • 翻翻

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

    我改plurk的語法改到很頭暈

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

  • http://www.mukispace.com muki

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

  • 翻翻

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

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

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

    不好意思叨擾妳了

  • http://www.itouchtw.com/ 梅干扣肉

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

    祝版大新書大賣~~~~

  • http://www.mukispace.com muki

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

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

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

  • http://ethantw.net/ ethan

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

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

  • http://www.bokeam.com BoKeam

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

  • muki

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

  • alan

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

  • http://konoozi.com Website Design Buffalo

    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.

  • http://www.qito.com Kai

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

  • 瓦斯爐

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