专注于互联网--专注于架构

 最新标签
网站地图
文章索引
Rss订阅

首页 »Html教程 » css圆角代码:CSS实现圆角的实例代码 »正文

css圆角代码:CSS实现圆角的实例代码

来源: 发布时间:星期五, 2008年9月26日 浏览:1096次 评论:0

实例1：

　　利用<strong>标签的逐渐缩小,做成圆角的效果,主要是给<strong>标签用上了font-size;margin;border;display;height;这些属性。以下是CSS代码：

  1. #circle{
  2. margin:50pxauto;
  3. width:300px;
  4. overflow:hidden;
  5. }
  6. .include{
  7. background:transparent;
  8. }
  9. .s1,.s2,.s3,.s4,.s5{
  10. font-size:1px;
  11. display:block;
  12. overflow:hidden;
  13. background:#66ccff;
  14. }
  15. .s1,.s2,.s3,.s4{
  16. height:1px;
  17. }
  18. .s2,.s3,.s4,.s5{
  19. border-right:1pxsolid#fff;
  20. border-left:1pxsolid#fff;
  21. }
  22. .s1{
  23. margin:07px;
  24. background:#fff;
  25. }
  26. .s2{
  27. margin:05px;
  28. border-width:2px;
  29. }
  30. .s3{
  31. margin:03px;
  32. border-width:2px;
  33. }
  34. .s4{
  35. margin:02px;
  37. }
  38. .s5{
  39. margin:01px;
  40. height:2px;
  41. }
  42. .bg{
  43. background:#66ccff;
  44. border-right:1pxsolid#fff;
  45. border-left:1pxsolid#fff;
  46. display:block;
  47. height:100px;
  48. overflow:hidden;
  49. font-weight:bold;
  50. }

　　以下是HTML代码：

  1. <divid="circle">
  2. <spanclass="include">
  3. <strongclass="s1"></strong>
  4. <strongclass="s2"></strong>
  5. <strongclass="s3"></strong>
  6. <strongclass="s4"></strong>
  7. <strongclass="s5"></strong>
  8. </span>
  9. <spanclass="bg">
  10. css圆角
  11. </span>
  12. <spanclass="include">
  13. <strongclass="s5"></strong>
  14. <strongclass="s4"></strong>
  15. <strongclass="s3"></strong>
  16. <strongclass="s2"></strong>
  17. <strongclass="s1"></strong>
  18. </span>
  19. </div>

标签：css圆角边框 css圆角 css实现圆角 css圆角代码

相关文章

读者评论

发表评论

  • 昵称：
  • 内容：

热门标签

精华推荐

Dig排行

阅读排行

最新文章