CSS圆角适用于所有没有图像和javascript的浏览器

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS圆角适用于所有没有图像和javascript的浏览器相关的知识，希望对你有一定的参考价值。

  1. Code html :
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <link rel="Stylesheet" media="screen" type="text/css" href="css/style.css" />
  8. <title>Rounded Corner Without image Work in all Browsers</title>
  9. </head>
  10. <body>
  11.  
  12. <!-- Rounded Corner -->
  13. <div class="RoundedCorner"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
  14.   <div align="center">
  15.     <h1>Rounded Corner Without image Work in ie 6 </h1>
  16.   </div>
  17.   <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> </div>
  18. <!-- Rounded Corner -->
  19.  
  20. </body>
  21. </html>
  22.  
  23. Code CSS : 
  24.  
  25. div.RoundedCorner {
  26. 	background: #6c18cb
  27. }
  28. b.rtop, b.rbottom {
  29. 	display:block;
  30. 	background: #fff
  31. }
  32. b.rtop b, b.rbottom b {
  33. 	display:block;
  34. 	height: 1px;
  35. 	overflow: hidden;
  36. 	background: #6c18cb
  37. }
  38. b.r1 {
  39. 	margin: 0 5px
  40. }
  41. b.r2 {
  42. 	margin: 0 3px
  43. }
  44. b.r3 {
  45. 	margin: 0 2px
  46. }
  47. b.rtop b.r4, b.rbottom b.r4 {
  48. 	margin: 0 1px;
  49. 	height: 2px
  50. }
  51. div.RoundedCorner h1
  52. {
  53. 	font-family:Tahoma, Geneva, sans-serif;
  54. 	color:white;
  55. }

以上是关于CSS圆角适用于所有没有图像和javascript的浏览器的主要内容，如果未能解决你的问题，请参考以下文章

CSS 没有图像和数量JS的圆角。 CSS解决方案

CSS 纯css圆角没有图像

CSS 没有图像的圆角 - 有效的xhtml / css

CSS 没有图像的圆角

CSS 圆角没有图像

HTML 圆角没有图像，只是css，这工作