纳速健身

标题: 利用css制作圆角方框演示代码 [打印本页]
作者: awagink    时间: 2008-4-19 11:44
标题: 利用css制作圆角方框演示代码
  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" c />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. div.RoundedCorner{background: #9BD1FA}
  8. b.rtop, b.rbottom{display:block;background: #FFF}
  9. b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
  10. b.r1{margin: 0 5px}
  11. b.r2{margin: 0 3px}
  12. b.r3{margin: 0 2px}
  13. b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
  14. </style>
  15. </head>

  17. <body>
  18. <div class="RoundedCorner">
  19. <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
  20. 无图片实现圆角框
  21. <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
  22. </div>
  23. </body>
  24. </html>
复制代码
这是一个圆角矩形
作者: awagink    时间: 2008-4-19 11:48
标题: 一个CSS圆角效果
  1. <style type="text/css">
  2. <!--
  3. #ibox01 {
  4. overflow: hidden;
  5. height: 1px;
  6. margin-right: 5px;
  7. margin-left: 5px;
  8. background-color: #CC0000;
  9. }
  10. #ibox02 {
  11. height: 1px;
  12. margin-right: 3px;
  13. margin-left: 3px;
  14. border-right-width: 2px;
  15. border-left-width: 2px;
  16. border-right-style: solid;
  17. border-left-style: solid;
  18. border-right-color: #CC0000;
  19. border-left-color: #CC0000;
  20. overflow: hidden;
  21. }
  22. #ibox03 {
  23. height: 1px;
  24. margin-right: 2px;
  25. margin-left: 2px;
  26. border-right-width: 1px;
  27. border-left-width: 1px;
  28. border-right-style: solid;
  29. border-left-style: solid;
  30. border-right-color: #CC0000;
  31. border-left-color: #CC0000;
  32. overflow: hidden;
  33. }
  34. #ibox04 {
  35. overflow: hidden;
  36. height: 1px;
  37. margin-right: 1px;
  38. margin-left: 1px;
  39. border-right-width: 1px;
  40. border-left-width: 1px;
  41. border-right-style: solid;
  42. border-left-style: solid;
  43. border-right-color: #CC0000;
  44. border-left-color: #CC0000;
  45. }
  46. #ibox05 {
  47. overflow: hidden;
  48. height: 1px;
  49. margin-right: 1px;
  50. margin-left: 1px;
  51. border-right-width: 1px;
  52. border-left-width: 1px;
  53. border-right-style: solid;
  54. border-left-style: solid;
  55. border-right-color: #CC0000;
  56. border-left-color: #CC0000;
  57. }
  58. #boxcon {
  59. border-right-width: 1px;
  60. border-left-width: 1px;
  61. border-right-style: solid;
  62. border-left-style: solid;
  63. border-right-color: #CC0000;
  64. border-left-color: #CC0000;
  65. }
  66. .testlayer {
  67. height: 200px;
  68. width: 300px;
  69. }
  70. .testboxbg {
  71. background-color: #666666;
  72. }
  73. .testboxcon {
  74. height: 190px;
  75. background-color: #666666;
  76. position: relative;
  77. }
  78. -->
  79. </style>
  80. <div class="testlayer">
  81. <div id="ibox">
  82.   <div id="ibox01" class="testboxbg"></div>
  83.   <div id="ibox02" class="testboxbg"></div>
  84.   <div id="ibox03" class="testboxbg"></div>
  85.   <div id="ibox04" class="testboxbg"></div>
  86.   <div id="ibox05" class="testboxbg"></div>
  87.   <div id="boxcon" class="testboxcon"></div>
  88.   <div id="ibox05" class="testboxbg"></div>
  89.   <div id="ibox04" class="testboxbg"></div>
  90.   <div id="ibox03" class="testboxbg"></div>
  91.   <div id="ibox02" class="testboxbg"></div>
  92.   <div id="ibox01" class="testboxbg"></div>
  93. </div>
  94. </div>
复制代码

做到圆角样式可以重复使用，并且不同包含内容用不同的Class进行设置，可以更换背景

样式.testboxcon 用了一个“相对”定位，主要是给里面的多个内容定位做一个参考

最外面的div class=“testlayer” 主要是在在大布局时给圆角一个“区域”

这个圆角在FF中，可以兼容显示

另外，建议大家在做圆角的时候，最好把弧度控制在5*5px的区域内，10px弧度不好看，而且计算起来比较麻烦



欢迎光临 纳速健身 (https://nasue.com/) Powered by Discuz! X3.4