无图片CSS圆角

知更鸟
知更鸟
站长
2332
文章
0
粉丝
Web前端43,114阅读模式
  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. }
  15. .box {
  16. width: 500px;
  17. margin: 30px auto;
  18. }
  20. .box .r1 {
  21. height: 1px;
  22. overflow: hidden;
  23. margin: 0 5px;
  24. background: #f60;
  25. }
  27. .box .r2 {
  28. height: 1px;
  29. border-left: 2px solid #f60;
  30. border-right: 2px solid #f60;
  31. margin: 0 3px;
  32. background: #ff0;
  33. overflow: hidden;
  34. }
  36. .box .r3 {
  37. height: 1px;
  38. border-left: 1px solid #f60;
  39. border-right: 1px solid #f60;
  40. margin: 0 2px;
  41. background: #ff0;
  42. overflow: hidden;
  43. }
  45. .box .r4 {
  46. height: 2px;
  47. border-left: 1px solid #f60;
  48. border-right: 1px solid #f60;
  49. margin: 0 1px;
  50. background: #ff0;
  51. overflow: hidden;
  52. }
  54. .box .content {
  55. background: #fff;
  56. border-left: 1px solid #f60;
  57. border-right: 1px solid #f60;
  58. padding: 7px 10px;
  59. zoom: 1;
  60. } /*---修改边框颜色---*/
  62. .box .r2, .box .r3, .box .r4, .box .content {
  63. border-color: #2d437b;
  64. }
  66. .box .r1 {
  67. background: #2d437b;
  68. } /*---修改背景颜色---*/
  70. .box .r2, .box .r3, .box .r4, .box .content {
  71. background: #f3fdff;
  72. } /*---修改圆角大小---*/
  74. .box2 {
  75. width: 500px;
  76. margin: 30px auto;
  77. }
  79. .box2 .r1 {
  80. height: 1px;
  81. overflow: hidden;
  82. margin: 0 2px;
  83. background: #f60;
  84. }
  86. .box2 .r2 {
  87. height: 1px;
  88. overflow: hidden;
  89. margin: 0 1px;
  90. border-left: 1px solid #f60;
  91. border-right: 1px solid #f60;
  92. background: #ff0;
  93. }
  95. .box2 .content {
  96. background: #ff0;
  97. border-left: 1px solid #f60;
  98. border-right: 1px solid #f60;
  99. padding: 7px 10px;
  100. zoom: 1;
  101. }
  102. </style>
  103. </head>
  105. <body>
  106. <div class="box2">
  107. <div class="top">
  108. <div class="r1"></div>
  109. <div class="r2"></div>
  110. <div class="r3"></div>
  111. <div class="r4"></div>
  112. </div>
  113. <div class="content">
  114. <p>
  115. 这样形成的圆角，是具备多种优势的：<br /> 1. 无论是在横向还是纵向上都保持着无限的扩展性。(试着修改box的width、content的height。)<br /> 2. 没有hack，且不易出现浏览器兼容性问题。<br /> 3. 圆角颜色易自定义。<br /> 4. 圆角大小可自定义。(试着将class="box"的修改为class="box2"。)<br /> 5. 圆角模式易自定义。<br /> 6. 可以存在于任意背景中。(试着修改body的background。)<br /> 7. html结构清晰。
  116. </p>
  117. </div>
  118. <div class="bottom">
  119. <div class="r4"></div>
  120. <div class="r3"></div>
  121. <div class="r2"></div>
  122. <div class="r1"></div>
  123. </div>
  124. </div>
  125. </body>
  126. </html>

本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！

手动编写SVG
Swiper滑动特效插件
Swiper滑动特效插件
全屏背景幻灯片jQuery 插件Vegas
全屏背景幻灯片jQuery 插件Vegas
Flex布局子元素撑开宽度
Flex布局子元素撑开宽度
weinxin
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！
获取本主题
598845006
咨询主题请加Q：598845006
多功能主题 Begin
 
知更鸟
  • CSS
  • Web前端
获取本主题
598845006
咨询主题请加Q：598845006
多功能主题 Begin
评论  4  访客  4
    • deep
      deep 4
      湖南省郴州市 1F
      回复

      目前还不敢在客户网站中尝试，不得不考虑低版本IE

      • rockiezh
        rockiezh 0
        山东省青岛市 2F
        回复

        不知道兼容IE6不

        • ztong
          ztong 0
          四川省成都市 3F
          回复

          其实不用这么麻烦，直接用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
            湖南省长沙市 4F
            回复

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

          匿名

          发表评论

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

          拖动滑块以完成验证