Posted By

mn232nm on 11/02/08


Tagged

css


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

rwczippy
vali29


CSS Rounded borders without images


 / Published in: HTML
 

Rounded borders without images

  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 runat="server">
  4. <title>纯CSS制作的圆角边框</title>
  5. <style type="text/css">
  6. body
  7. {
  8. font-size:12px;
  9. }
  10. #xsnazzy h1, #xsnazzy h2, #xsnazzy p
  11. {
  12. margin:0 10px;
  13. letter-spacing:1px;
  14. }
  15. #xsnazzy h1
  16. {
  17. font-size:2.5em;
  18. color:#06a;
  19. }
  20. #xsnazzy h2
  21. {
  22. font-size:2em;
  23. color:#06a;
  24. border:0;
  25. }
  26. #xsnazzy p
  27. {
  28. padding-bottom:0.5em;
  29. }
  30. #xsnazzy h2
  31. {
  32. padding-top:0.5em;
  33. }
  34. #xsnazzy
  35. {
  36. background: transparent;
  37. margin:1em;
  38. }
  39.  
  40. .xtop, .xbottom
  41. {
  42. display:block;
  43. background:transparent;
  44. font-size:2px;
  45. }
  46. .xb1, .xb2, .xb3, .xb4
  47. {
  48. display:block;
  49. overflow:hidden;
  50. }
  51. .xb1, .xb2, .xb3
  52. {
  53. height:1px;
  54. }
  55. .xb2, .xb3, .xb4
  56. {
  57. background:#fff;
  58. border-left:1px solid #08c;
  59. border-right:1px solid #08c;
  60. }
  61.  
  62. .xb1 {margin:0 5px; background:#08c;}
  63. .xb2 {margin:0 3px; border-width:0 2px;}
  64. .xb3 {margin:0 2px;}
  65. .xb4 {height:2px; margin:0 1px;}
  66.  
  67. .xboxcontent {display:block; background:#fff; border:0 solid #08c; border-width:0 1px;}
  68.  
  69. </style>
  70. </head>
  71. <div id="xsnazzy">
  72. <b class="xtop">
  73. <b class="xb1" ></b>
  74. <b class="xb2"></b>
  75. <b class="xb3"></b>
  76. <b class="xb4"></b>
  77. </b>
  78. <div class="xboxcontent">
  79. <h1>
  80. Snazzy Borders</h1>
  81. <p>
  82. Based on Nifty Corners By Alessandro Fulciniti<br />
  83. http://pro.html.it/esempio/nifty/</p>
  84. <h2>
  85. Rounded borders without images</h2>
  86. <p>
  87. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
  88. euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
  89. minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
  90. ex ea commodo consequat.</p>
  91. <p>
  92. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
  93. vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
  94. dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
  95. nulla facilisi.</p>
  96. </div>
  97.  
  98. <b class="xbottom">
  99. <b class="xb4"></b>
  100. <b class="xb3"></b>
  101. <b class="xb2"></b>
  102. <b class="xb1"></b>
  103. </b>
  104. </div>
  105. </body>
  106. </html>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: pindoyar on January 13, 2009

very good coding . thank for your post ..

Pindoyar

You need to login to post a comment.