无图片CSS圆角

<!DOCTYPE html PUBLIC \”-//W3C//DTD XHTML 1.0 Transitional//EN\” \”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\”>

  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>

原创文章,作者:知更鸟,如若转载,请注明出处:https://www.davidwu.net/archives/513

发表评论

电子邮件地址不会被公开。 必填项已用*标注