技巧 | 用css作出不同的圓角效果


這是剛剛找資料的時候發現的css圓角5種效果
這5種完全沒有用到圖片，純粹是用css，配合1px的像素堆疊達成效果
我把這五種代碼貼回家，並且把效果釋放出來給大家觀賞，有興趣的人可以繼續往下看。

@ 文章出處 / 用CSS實現圓角框框
我也把代碼貼到自己的網誌，有需要的人，可以從我這邊拷貝回家，也可以從那篇文章拷貝代碼。

簡潔型css圓角矩形：

簡潔型css圓角矩形

3D圓角矩形：

3D圓角矩形

略帶菱形的css圓角矩形：

略帶菱形的css圓角矩形

特殊css圓角矩形：

特殊css圓角矩形

反向css圓角矩形：

反向css圓角矩形

等明天好好研究他到底怎麼寫 :)

引用網址：

相關文章
文章標籤：

EVERYBODYs COMMENT:

  • Kirin Lin
    1
    Kirin Lin (LV.5) // 2008.12.10 23:06

    這個技巧就是用 HTML 加上 CSS 去畫圓角出來，好處是跨瀏覽器，壞處是 HTML 會多很多不必要的內容。
    還有一些是用 JavaScript 去加入那些 HTML Code，這樣比較乾淨些。
    CSS 3 則是有新方法讓 background-image 可以上下左右分別指定，這樣做圓角效果只要不同的圖片放在四個角落即可，Firefox 有支援歐！

    REPLY Kirin Lin's MESSAGE
  • Mion
    2
    Mion (LV.57) // 2008.12.11 07:57

    特殊跟那個反向css圓角，不知道為什麼我看了覺得好好笑...

    REPLY Mion's MESSAGE
  • muki
    3
    muki (LV.1015) // 2008.12.11 11:31

    的確..不必要的html會多出很多。
    我也是因為這個原因遲遲沒有用!!!
    倒是有看過別人用成java script，不過裝了一堆java script好像也會拖速度???
    CSS3唷，ie有支援嗎(汗

    REPLY muki's MESSAGE
  • muki
    4
    muki (LV.1015) // 2008.12.11 11:31

    囧"...
    笑夠再回來XD?

    REPLY muki's MESSAGE
  • 海芋
    5
    海芋 (LV.3) // 2008.12.11 17:16

    CSS 3 不僅提供background-image，還提供border-radius，不過IE要吃，大概要等很久很久了....

    REPLY 海芋's MESSAGE
  • Kirin+Lin
    6
    Kirin+Lin (LV.1) // 2008.12.12 01:14

    Java 跟 JavaScript 不一樣歐！XD
    至於 CSS 3 咪…IE7 看來只有部份支援，等 IE8？噗～

    REPLY Kirin+Lin's MESSAGE
  • muki
    7
    muki (LV.1015) // 2008.12.12 16:42

    IE8出來之後，不知道會不會跟著支援css 3..
    如果他再獨斷一點，真的就要被撻伐了啦><

    REPLY muki's MESSAGE
  • muki
    8
    muki (LV.1015) // 2008.12.12 16:44

    @ Kirin+Lin
    喔喔..
    我筆誤打錯了 冏(等等馬上做更改
    你噗一聲是對ie 8沒信心嗎XD?

    REPLY muki's MESSAGE
  • SEVEN
    9
    SEVEN (LV.5) // 2009.10.06 22:22

    好東西，剛好需要這個！ :wink:

    REPLY SEVEN's MESSAGE

    • LEAVE YOUR COMMENT:




    :wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:
     
     
    字體大小： 小字型 12px大字型 15px
    ▲ back to top