DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS圓角邊框制作指南與實例
CSS圓角邊框制作指南與實例
編輯：CSS詳解     
這篇文章主要介紹了CSS圓角邊框制作指南與實例,這裡突出講解了以純代碼實現的小圓角 來消滅鋸齒的方法,需要的朋友可以參考下

使用 CSS 制作圓角邊框可能是網頁前端設計師們最頭痛的問題之一. 圓角邊框看似簡單, 但實現起來卻很不簡單, 可能需要復雜的頁面結構或大量的邊角圖片, 方法很多, 但無論哪一種都是難以維護的.

CSS 很直觀, 但顯然不夠靈活, 導致頁面設計中出現大量冗余代碼. 不能使用變量和循環, 若想清除某個類型所有屬性的值還需要一句一句的清除, 而不是一句完成. 而最令人痛心的莫過於現實圓角邊框, 或許以下的代碼是我們夢寐以求的:

CSS Code復制內容到剪貼板
  1. .roundbox { round: 3px; } /* 圓角大小為三像素 */

奈何事與願違, W3C 裡面沒有這樣的東西. 某些浏覽器支持一些特殊的屬性可以實現類似功能, 但那並不能得到其他浏覽器的支持. WordPress 後台就使用了這樣的屬性, Firefox 等一些浏覽器上顯示非常好看, 但 IE 上卻慘不忍睹.

為了實現小圓角, 各網站是各出奇招, 什麼方法都有. 而我比較喜歡百度知道的實現辦法, 因為零圖片, 並且易於控制, 因為圓角部分是在 box 外部, 隨時可以無害刪除.

百度知道的方法借用了 div 在 float:none 時占用全行的特性, 在 box 上方和下方各都放置幾個 div, 並對這些 div 設置背景色, 邊框和外邊距. 也就是說, 我們只要固定了外層的寬度, 其他的就不需要操心了. 我模仿百度知道的樣式做了一個例子, 效果可以參考一下右邊的截圖. 實現代碼如下:

CSS Code復制內容到剪貼板
  1. <div style="margin:0 4px; background:#B0BEC7; height:1px; overflow:hidden;"></div>
  2. <div style="margin:0 2px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
  3. <div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
  4. <div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
  5. <div style="background:#E1E7E9; border:1px solid #B0BEC7; border-width:0 1px;">
  6. <div style="font-size:12px; font-weight:bolder; font-family:Verdana; color:#258; padding:2px 10px 5px;">
  7. Cascading Style Sheets
  8. </div>
  9. <div style="background:#FFF; margin:0 3px; font-size:11px; font-family:Verdana; color:#333; padding:5px 10px; overflow:hidden;">
  10. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Tutorials, books, mailing lists for users, etc.
  11. </div>
  12. </div>
  13. <div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
  14. <div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
  15. <div style="margin:0 2px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
  16. <div style="margin:0 4px; background:#B0BEC7; height:1px; overflow:hidden;"></div>

其中有一點是很重要的, 記得為上下圓角所在的行添加 overflow:hidden 屬性, 否則在 IE 中將會相當的惡心.

圓角是實現了, 但並不是完美無瑕的, 邊角有鋸齒 (下面會介紹小圓角具體的方法可以消滅鋸齒, 只要你不嫌麻煩). 為什麼不能使用過渡顏色呢? 因為圓角所在的行只能控制背景和邊框兩處的顏色, 所以不能在同一行搞出比較復雜的顏色過渡. 因為顏色被限制了, 所以圓角的大小也被限制了 (有鋸齒的圓角太大會顯得很難看), 如果你的 box 有邊線, 圓角大小建議不要超過 4 個像素, 如果沒邊線, 也不要超過 6 個像素. 有更大的圓角需要最好還是采用圖片, 處理簡單又方便.

訪問過騰訊問問的朋友可能會發現, 它的樣式是抄襲百度知道的. 但你知道嗎? 其實它的圓角效果是使用圖片實現的. 有興趣的朋友可以去研究一下.


純代碼實現的小圓角

以下是我個人的一點建議, 希望對你有幫助.

什麼時候使用純代碼制作圓角邊框?

你驅使代碼的能力勝於圖形.
你追求更快的網頁顯示速度, 就算是微乎其微的差別.
在模板或主題中使用.
什麼時候使用圖片制作圓角邊框?

你驅使圖形的能力勝於代碼.
你不在乎所差不幾的網頁顯示速度, 更注重直觀和維護方便.
在文章或其它動態內容中使用.

其實也很簡單, 下面分析一下, 或許以後會有用.

1. 做一個直角的 DIV, 給他畫上邊框. (以下圖片都以左上角為例)
2016310115259230.png (192×128)

2. 在 DIV 內部畫第二個 DIV, 背景色與頁面背景顏色相同.
2016310115327930.png (192×128)

3. 將第二個 DIV 挪到邊界上, 使它能與頁面背景連接, 這樣看上去就像一個缺角的框框.
2016310115347263.png (192×128)

4. 在第二個 DIV 內畫第三個 DIV, 在這裡其實就是一點.
2016310115403607.png (192×128)

5. 將第三個 DIV 挪到右下角的位置, Done.
2016310115420989.png (192×128)

主要步驟講解了以後來看一個完整的例子：

CSS Code復制內容到剪貼板
  1. <!DOCTYPE Html PUBLIC "-//W3C//DTD XHtml 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xHtml11.dtd">
  3. <Html XMLns="http://www.w3.org/1999/xHtml">
  4. <head profile="http://gmpg.org/xfn/11">
  5. <meta http-equiv="Content-Type" content="text/Html; charset=UTF-8" />
  6. <title>純 CSS 打造圓角</title>
  8. <style>
  9. <!--
  10. body {
  11. padding-top:200px;
  12. }
  14. /* 框 */
  15. #sg-feedback {
  16. background:#EFF7CE;
  17. border:1px solid #9ECD62;
  18. font-size:12px;
  19. margin:0pt auto;
  20. text-align:center;
  21. width:200px;
  22. }
  23. #sg-feedback div .dot {
  24. background:#9ECD62;
  25. }
  26. #sg-feedback .inner {
  27. margin:5px 0pt;
  28. }
  30. /* 上邊角 */
  31. .yshp_rnd .rnd_top * {
  32. display:block;
  33. background:#FFFFFF;
  34. overflow:hidden;
  35. }
  36. .yshp_rnd .rnd_top * * {
  37. background:#DE650A;
  38. }
  39. .yshp_rnd {
  40. position:relative;
  41. }
  42. .yshp_rnd .rnd_top .west {
  43. position:absolute;
  44. height:2px;
  45. left:-1px;
  46. top:-1px;
  47. width:2px;
  48. }
  49. .yshp_rnd .rnd_top .west .dot {
  50. position:relative;
  51. height:1px;
  52. left:1px;
  53. top:1px;
  54. width:1px;
  55. }
  56. .yshp_rnd .rnd_top .east {
  57. position:absolute;
  58. height:2px;
  59. rightright:-1px;
  60. top:-1px;
  61. width:2px;
  62. }
  63. .yshp_rnd .rnd_top .east .dot {
  64. position:relative;
  65. height:1px;
  66. left:0pt;
  67. top:1px;
  68. width:1px;
  69. }
  71. /* 下邊角 */
  72. .yshp_rnd .rnd_bot * {
  73. display:block;
  74. background:#FFFFFF;
  75. overflow:hidden;
  76. }
  77. .yshp_rnd .rnd_bot * * {
  78. background:#DE650A;
  79. }
  80. .yshp_rnd .rnd_bot .west {
  81. position:absolute;
  82. bottombottom:-1px !important;
  83. bottombottom:-2px;
  84. height:2px;
  85. left:-1px;
  86. width:2px;
  87. }
  88. .yshp_rnd .rnd_bot .west .dot {
  89. position:relative;
  90. height:1px;
  91. left:1px;
  92. top:0pt;
  93. width:1px;
  94. }
  95. .yshp_rnd .rnd_bot .east {
  96. position:absolute;
  97. bottombottom:-1px !important;
  98. bottombottom:-2px;
  99. height:2px;
  100. rightright:-1px;
  101. width:2px;
  102. }
  103. .yshp_rnd .rnd_bot .east .dot {
  104. position:relative;
  105. height:1px;
  106. left:0pt;
  107. top:0pt;
  108. width:1px;
  109. }
  110. -->
  111. </style>
  112. </head>
  114. <body>
  115. <div id="sg-feedback" class="yshp_rnd">
  117. <div class="rnd_top">
  118. <div class="west">
  119. <div class="dot"></div>
  120. </div>
  121. <div class="east">
  122. <div class="dot"></div>
  123. </div>
  124. </div>
  126. <div class="inner">Hello, World!</div>
  128. <div class="rnd_bot">
  129. <div class="west">
  130. <div class="dot"></div>
  131. </div>
  132. <div class="east">
  133. <div class="dot"></div>
  134. </div>
  135. </div>
  137. </div>
  138. </body>
  139. </Html>

最終效果如下圖所示:
2016310115438554.png (268×99)

CSS詳解
深入分析網頁CSS隱藏文字和以圖換字技術
打開電腦，感覺沒有什麼事可做，就隨便拿起《CSS mastery》翻了下，剛好看倒圖像替換這塊，突
CSS:控制IE滾動條
今天
創建和插入CSS樣式表秘笈
你對CSS樣式表的概念是否了解，這裡向大家描述一下如何創建和插入CSS樣式表，希望本文介紹對你的學

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
CSS布局:讓頁腳始終保持底部的方法 非CSS3 純HTML 實現圓角表格 IE7和FF浏覽器中右下角圖片廣告 CSS樣式表書寫順序 用margin解決縮進問題 不間斷連續滾動的圖片效果(向下滾動) 非常酷的微格式：XFN規范 DIV CSS編碼時必須注意的細節 CSS :active 偽類 元素被激活時的樣式 控制first-letter偽類的背景
熱門推薦
用css網站布局之十步實錄！（三） CSS教程:閉合CSS浮動元素的幾種方法 css選擇器命名規則:差異及可能產生的問題 另一個角度談談DIV+CSS 完美兼容ie6,ie7,ie8以及firefox的css透明濾鏡 CSS3的box-shadow屬性實現圖層陰影效果 用css網站布局之十步實錄！（一） CSS中filter濾鏡的學習筆記(靜態濾鏡及動態濾鏡) 特殊文字樣式的制作，非常靈活方便，效果極酷
大家都在看
Ajax留言本源碼 提供下載了 如何把select下拉框的值傳到id中實現代碼 CSS樣式命名規范 css學習筆記 node.js中RPC(遠程過程調用)的實現原理介紹 JS中遞歸函數 javascript實現按回車鍵切換焦點 網頁教程:頁面返回頂部錨點按鈕的設計
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved