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

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



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

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

簡潔型css圓角矩形：

  1. <style>
  2. .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}
  3. .b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}
  4. .b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-right:1px solid #999;}
  5. .b1,.b1b{margin:0 5px;background:#999;}
  6. .b2,.b2b{margin:0 3px;border-width:2px;}
  7. .b3,.b3b{margin:0 2px;}
  8. .b4,.b4b{height:2px;margin:0 1px;}
  9. .d1{background:#F7F8F9;}
  10. </style>
  11. <div>
  12. <b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b>
  13. <div class="b d1">
  14. <font style="font-size:26px;color:red; margin:0px 10px;">簡潔型css圓角矩形</font>
  15. </div>
  16. <b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b>
  17. </div>

3D圓角矩形：

  1. <style>
  2. .raised{background:transparent;width:40%;}
  3. .raised h1,.raised p{margin:0 10px;}
  4. .raised h1{font-size:2em;color:#fff;}
  5. .raised p{padding-bottom:0.5em;}
  6. .raised .b1,.raised .b2,.raised .b3,.raised .b4,.raised .b1b,.raised .b2b,.raised .b3b,.raised .b4b{display:block;overflow:hidden;font-size:1px;}
  7. .raised .b1,.raised .b2,.raised .b3,.raised .b1b,.raised .b2b,.raised .b3b{height:1px;}
  8. .raised .b2{background:#ccc;border-left:1px solid #fff;border-right:1px solid #eee;}
  9. .raised .b3{background:#ccc;border-left:1px solid #fff;border-right:1px solid #ddd;}
  10. .raised .b4{background:#ccc;border-left:1px solid #fff;border-right:1px solid #aaa;}
  11. .raised .b4b{background:#ccc;border-left:1px solid #eee;border-right:1px solid #999;}
  12. .raised .b3b{background:#ccc;border-left:1px solid #ddd;border-right:1px solid #999;}
  13. .raised .b2b{background:#ccc;border-left:1px solid #aaa;border-right:1px solid #999;}
  14. .raised .b1{margin:0 5px;background:#fff;}
  15. .raised .b2, .raised .b2b{margin:0 3px;border-width:0 2px;}
  16. .raised .b3, .raised .b3b{margin:0 2px;}
  17. .raised .b4, .raised .b4b{height:2px; margin:0 1px;}
  18. .raised .b1b{margin:0 5px; background:#999;}
  19. .raised .boxcontent{display:block;background:#ccc;border-left:1px solid #fff;border-right:1px solid #999;}
  20. </style>
  21. <div>
  22. <div class="raised">
  23. <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
  24. <div class="boxcontent">
  25. <h1>3D圓角矩形</h1>
  26. </div>
  27. <b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
  28. </div>
  29. </div>

略帶菱形的css圓角矩形：

  1. <style>
  2. .curved {
  3. background:transparent;
  4. width:40%;
  5. }
  6. .curved h1, .curved p {
  7. margin:0 10px;
  8. }
  9. .curved h1 {
  10. font-size:2em;
  11. color:#fff;
  12. }
  13. .curved p {
  14. padding-bottom:0.5em;
  15. }
  16. .curved .b1, .curved .b2, .curved .b3, .curved .b4 {
  17. display:block;
  18. overflow:hidden;
  19. height:1px;
  20. font-size:1px;
  21. }
  22. .curved .b2, .curved .b3, .curved .b4 {
  23. background:#e0cea3;
  24. border-left:1px solid #fff;
  25. border-right:1px solid #fff;
  26. }
  27. .curved .b1 {
  28. margin:0 4px;
  29. background:#fff;
  30. }
  31. .curved .b2 {
  32. margin:0 4px;
  33. height:2px;
  34. }
  35. .curved .b3 {
  36. margin:0 3px;
  37. }
  38. .curved .b4 {
  39. margin:0;
  40. height:1px;
  41. border-width:0 3px 0 3px;
  42. }
  43. .curved .boxcontent {
  44. display:block;
  45. background:#e0cea3;
  46. border:0 solid #fff;
  47. border-width:0 1px;
  48. }
  49. </style>
  50. <div>
  51. <div class="curved">
  52. <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
  53. <div class="boxcontent">
  54. <h1>略帶菱形的css圓角矩形</h1>
  55. </div>
  56. <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
  57. </div>
  58. </div>

特殊css圓角矩形：

  1. <style>
  2. .pillar {
  3. background:transparent;
  4. width:40%;
  5. }
  6. .pillar h1, .pillar p {
  7. margin:0 10px;
  8. }
  9. .pillar h1 {
  10. font-size:2em;
  11. color:#fff;
  12. }
  13. .pillar p {
  14. padding-bottom:0.5em;
  15. }
  16. .pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 {
  17. display:block;
  18. overflow:hidden;
  19. font-size:1px;
  20. }
  21. .pillar .b1, .pillar .b2, .pillar .b4 {
  22. height:1px;
  23. }
  24. .pillar .b2, .pillar .b3 {
  25. background:#d66;
  26. border-left:1px solid #fff;
  27. border-right:1px solid #fff;
  28. }
  29. .pillar .b4 {
  30. background:#d66;
  31. border-left:4px solid #fff;
  32. border-right:4px solid #fff;
  33. }
  34. .pillar .b1 {
  35. margin:0 2px;
  36. background:#fff;
  37. }
  38. .pillar .b2 {
  39. margin:0 1px;
  40. border-width:0 1px;
  41. }
  42. .pillar .b3 {
  43. height:2px;
  44. margin:0;
  45. }
  46. .pillar .b4 {
  47. margin:0 2px;
  48. }
  49. .pillar .boxcontent {
  50. display:block;
  51. background:#d66;
  52. border-left:1px solid #fff;
  53. border-right:1px solid #fff;
  54. margin:0 5px;
  55. }</style>
  56. <div>
  57. <div class="pillar">
  58. <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b4"></b>
  59. <div class="boxcontent">
  60. <h1>特殊css圓角矩形</h1>
  61. </div>
  62. <b class="b4"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
  63. </div>
  64. </div>

反向css圓角矩形：

  1. <style>
  2. .serif {
  3. background: transparent; width:40%;
  4. }
  5. .serif h1, .serif p {
  6. margin:0 10px;
  7. }
  8. .serif h1 {
  9. font-size:2em; color:#fff;
  10. }
  11. .serif p {
  12. padding-bottom:0.5em;
  13. }
  14. .serif .b1, .serif .b2, .serif .b3, .serif .b4 {
  15. display:block;
  16. overflow:hidden;
  17. font-size:1px;
  18. }
  19. .serif .b1, .serif .b2, .serif .b3 {
  20. height:1px;
  21. }
  22. .serif .b2, .serif .b3 {
  23. background:#fc0;
  24. border-left:1px solid #fff;
  25. border-right:1px solid #fff;
  26. }
  27. .serif .b4 {
  28. background:#fc0;
  29. border-left:1px solid #fff;
  30. border-right:1px solid #fff;
  31. }
  32. .serif .b1 {
  33. margin:0; background:#fff;
  34. }
  35. .serif .b2 {
  36. margin:0 1px;
  37. border-width:0 2px;
  38. }
  39. .serif .b3 {
  40. margin:0 3px;
  41. }
  42. .serif .b4 {
  43. height:2px;
  44. margin:0 4px;
  45. }
  46. .serif .boxcontent {
  47. display:block;
  48. background:#fc0;
  49. border-left:1px solid #fff;
  50. border-right:1px solid #fff;
  51. margin:0 5px;
  52. }
  53. </style>
  54. <div>
  55. <div class="serif">
  56. <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
  57. <div class="boxcontent">
  58. <h1>反向css圓角矩形</h1>
  59. </div>
  60. <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
  61. </div>
  62. </div>

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

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

      • comments(9)
    1. Kirin Lin
      #1
      Kirin Lin //LV.5
      reply
      2008/12/10

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

    2. Mion
      #2
      Mion //LV.55
      reply
      2008/12/11

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

    3. muki
      #3
      muki //LV.919
      reply
      2008/12/11

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

    4. muki
      #4
      muki //LV.919
      reply
      2008/12/11

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

    5. 海芋
      #5
      海芋 //LV.3
      reply
      2008/12/11

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

    6. Kirin+Lin
      #6
      Kirin+Lin //LV.1
      reply
      2008/12/12

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

    7. muki
      #7
      muki //LV.919
      reply
      2008/12/12

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

    8. muki
      #8
      muki //LV.919
      reply
      2008/12/12

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

    9. SEVEN
      #9
      SEVEN //LV.5
      reply
      2009/10/06

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

    comments(9)



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