CSS实例(八):不用图片实现宽度、高度自定的圆角矩形

根据google的analytics界面分析整理,个人觉得不错。虽然元素多了点儿、看起来复杂了点儿、样子不那么非常美观,但是可以随意设置圆角矩形的宽度及高度,很灵活。
  不知为什么google用了b元素,有点奇怪。

  页面源码:
Html代码 收藏代码
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=GB2312"/>
  5. <title></title>
  6. <styletype="text/css">
  7. html,body{
  8. font-size:12px;
  9. }
  10. .round_border,.round_borderb{
  11. display:block;
  12. text-align:center;
  13. }
  14. .round_border_layer3,.round_border_layer2,.round_border_layer1,
  15. .round_border_content{
  16. border:1pxsolid#c4c4c4;
  17. border-width:01px01px;
  18. height:1px;
  19. overflow:hidden;
  20. }
  21. .round_border_layer3{
  22. margin:03px;
  23. background:#c4c4c4;
  24. }
  25. .round_border_layer2{
  26. margin:02px;
  27. }
  28. .round_border_layer1{
  29. margin:01px;
  30. }
  31. .round_border_content{
  32. height:300px;
  33. padding:3px6px;
  34. }
  35. /*onlyforbetterappearance,notnecessary,http://wallimn.iteye.com*/
  36. .round_border_layer2,.round_border_layer1{
  37. border-color:#d3d4d5;
  38. }
  39. /*******************controlbar**********************/
  40. .controlbar_border_layer3,.controlbar_border_layer2,.controlbar_border_layer1,
  41. .controlbar_border_content{
  42. background:#e9e9e9;
  43. height:1px;
  44. overflow:hidden;
  45. }
  46. .controlbar_border_layer3{
  47. margin:03px;
  48. }
  49. .controlbar_border_layer2{
  50. margin:02px;
  51. }
  52. .controlbar_border_layer1{
  53. margin:01px;
  54. }
  55. .controlbar_border_content{
  56. height:20px;
  57. padding:01em;
  58. line-height:20px;
  59. vertical-align:middle;
  60. }
  61. /*onlyforbetterappearance,notnecessary,http://wallimn.iteye.com*/
  62. .controlbar_border_layer1,..controlbar_border_layer2{
  63. border-color:#f2f2f2;
  64. }
  65. </style>
  66. </head>
  67. <body>
  68. <divstyle="width:260px;">
  69. <bclass="round_border">
  70. <bclass="round_border_layer3"></b>
  71. <bclass="round_border_layer2"></b>
  72. <bclass="round_border_layer1"></b>
  73. </b>
  74. <divclass="round_border_content">
  75. <bclass="round_border">
  76. <bclass="controlbar_border_layer3"></b>
  77. <bclass="controlbar_border_layer2"></b>
  78. <bclass="controlbar_border_layer1"></b>
  79. </b>
  80. <divclass="controlbar_border_content">
  81. 隔壁CSS
  82. </div>
  83. <bclass="round_border">
  84. <bclass="controlbar_border_layer1"></b>
  85. <bclass="controlbar_border_layer2"></b>
  86. <bclass="controlbar_border_layer3"></b>
  87. </b>
  88. </div>
  89. <bclass="round_border">
  90. <bclass="round_border_layer1"></b>
  91. <bclass="round_border_layer2"></b>
  92. <bclass="round_border_layer3"></b>
  93. </b>
  94. </div>
  95. </body>
  96. </html>


  效果(编辑调试浏览器IE7):

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值