无图片CSS圆角

Web前端43.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
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
评论  4  访客  4
    • 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

            好是好,似乎代码多了点,,,
            还是比较崇尚简洁。、

          匿名

          发表评论

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

          拖动滑块以完成验证