技巧 | 用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 有支援歐!

  • Mion
    2
    Mion (LV.57) // 2008.12.11 07:57

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

  • muki
    3
    muki (LV.1015) // 2008.12.11 11:31

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

  • muki
    4
    muki (LV.1015) // 2008.12.11 11:31

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

  • 海芋
    5
    海芋 (LV.3) // 2008.12.11 17:16

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

  • Kirin+Lin
    6
    Kirin+Lin (LV.1) // 2008.12.12 01:14

    Java 跟 JavaScript 不一樣歐!XD
    至於 CSS 3 咪…IE7 看來只有部份支援,等 IE8?噗~

  • muki
    7
    muki (LV.1015) // 2008.12.12 16:42

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

  • muki
    8
    muki (LV.1015) // 2008.12.12 16:44

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

  • SEVEN
    9
    SEVEN (LV.5) // 2009.10.06 22:22

    好東西,剛好需要這個! :wink:


  • 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