無圖片CSS圓角

知更鳥
知更鳥
知更鳥
1528
文章
6915
評論
2010年11月27日23:36:18 4 3.1K
  1. <!DOCTYPE?html?PUBLIC "-//W3C//DTD?XHTML?1.0?Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html?xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta?http-equiv="Content-Type" content="text/html;?charset=utf-8" />
  5. <title>無圖片CSS圓角</title>
  6. <style?type="text/css">
  7. body?{
  8. color: #000;
  9. background: #999;
  10. font-size: 12px;
  11. line-height:?1.5;
  12. margin:?0;
  13. }
  14. .box?{
  15. width: 500px;
  16. margin: 30px auto;
  17. }
  18. .box?.r1?{
  19. height: 1px;
  20. overflow: hidden;
  21. margin:?0 5px;
  22. background: #f60;
  23. }
  24. .box?.r2?{
  25. height: 1px;
  26. border-left: 2px solid #f60;
  27. border-right: 2px solid #f60;
  28. margin:?0 3px;
  29. background: #ff0;
  30. overflow: hidden;
  31. }
  32. .box?.r3?{
  33. height: 1px;
  34. border-left: 1px solid #f60;
  35. border-right: 1px solid #f60;
  36. margin:?0 2px;
  37. background: #ff0;
  38. overflow: hidden;
  39. }
  40. .box?.r4?{
  41. height: 2px;
  42. border-left: 1px solid #f60;
  43. border-right: 1px solid #f60;
  44. margin:?0 1px;
  45. background: #ff0;
  46. overflow: hidden;
  47. }
  48. .box?.content {
  49. background: #fff;
  50. border-left: 1px solid #f60;
  51. border-right: 1px solid #f60;
  52. padding: 7px 10px;
  53. zoom:?1;
  54. } /*---修改邊框顏色---*/
  55. .box?.r2,?.box?.r3,?.box?.r4,?.box?.content {
  56. border-color: #2d437b;
  57. }
  58. .box?.r1?{
  59. background: #2d437b;
  60. } /*---修改背景顏色---*/
  61. .box?.r2,?.box?.r3,?.box?.r4,?.box?.content {
  62. background: #f3fdff;
  63. } /*---修改圓角大小---*/
  64. .box2?{
  65. width: 500px;
  66. margin: 30px auto;
  67. }
  68. .box2?.r1?{
  69. height: 1px;
  70. overflow: hidden;
  71. margin:?0 2px;
  72. background: #f60;
  73. }
  74. .box2?.r2?{
  75. height: 1px;
  76. overflow: hidden;
  77. margin:?0 1px;
  78. border-left: 1px solid #f60;
  79. border-right: 1px solid #f60;
  80. background: #ff0;
  81. }
  82. .box2?.content {
  83. background: #ff0;
  84. border-left: 1px solid #f60;
  85. border-right: 1px solid #f60;
  86. padding: 7px 10px;
  87. zoom:?1;
  88. }
  89. </style>
  90. </head>
  91. <body>
  92. <div?class="box2">
  93. <div?class="top">
  94. <div?class="r1"></div>
  95. <div?class="r2"></div>
  96. <div?class="r3"></div>
  97. <div?class="r4"></div>
  98. </div>
  99. <div?class="content">
  100. <p>
  101. 這樣形成的圓角,是具備多種優勢的:<br?/>?1.?無論是在橫向還是縱向上都保持著無限的擴展性。(試著修改box的widthcontentheight。)<br?/>?2.?沒有hack,且不易出現瀏覽器兼容性問題。<br?/>?3.?圓角顏色易自定義。<br?/>?4.?圓角大小可自定義。(試著將class="box"的修改為class="box2"。)<br?/>?5.?圓角模式易自定義。<br?/>?6.?可以存在于任意背景中。(試著修改body的background。)<br?/>?7.?html結構清晰。
  102. </p>
  103. </div>
  104. <div?class="bottom">
  105. <div?class="r4"></div>
  106. <div?class="r3"></div>
  107. <div?class="r2"></div>
  108. <div?class="r1"></div>
  109. </div>
  110. </div>
  111. </body>
  112. </html>
weinxin
關于本站
分享交流WordPress經驗與技巧,關注前端設計與網站制作。僅用于功能演示。
最佳 CSS 框架 Web前端

最佳 CSS 框架

在構建網站時,使用 CSS 框架是一個實時的節省,因為它為您提供了每個網頁設計師和前端開發人員在制作網站時需要的工具。 CSS 框架是一個軟件框架,它允許使用 HTML/CSS 進行更簡單、更符合標準...
line-height安卓中不垂直居中 Web前端

line-height安卓中不垂直居中

設計響應式網頁,PC端和移動端的樣式兼容性,很讓人撓頭,最常見的就是文字垂直不居中,而且蘋果手機和安卓手機下表現也不盡相同,往往蘋果手機是垂直居中的,但在安卓機上字卻靠上了,總是差那么一像素,應該是安...
jQuery幻燈片插件:OWL Carousel Web前端

jQuery幻燈片插件:OWL Carousel

Owl Carousel 是一個強大、實用但小巧的 jQuery 幻燈片插件,它具有以下特點: 兼容所有瀏覽器 支持響應式 支持 CSS3 過度 支持觸摸事件 支持 JSON 及自定義 JSON 格式...
js實時獲取瀏覽器窗口大小 Web前端

js實時獲取瀏覽器窗口大小

js實時獲取瀏覽器窗口大小,我們可以使用addEventListener()方法來實現。該addEventListener()方法可以注冊事件處理程序以偵聽瀏覽器窗口resize事件,例如window...
匿名

發表評論

匿名網友 填寫信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

評論:4   其中:訪客  4   博主  0
    • deep deep 4

      目前還不敢在客戶網站中嘗試,不得不考慮低版本IE

      • rockiezh rockiezh 0

        不知道兼容IE6不

        • ztong ztong 0

          其實不用這么麻煩,直接用CSS就可以實現

          -webkit-border-radius: 10px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
          -moz-border-radius: 10px; /* FF1-3.6 */
          border-radius: 10px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

          • 第四個李智 第四個李智 0

            好是好,似乎代碼多了點,,,
            還是比較崇尚簡潔。、