搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

CSS的一些圆角图形实例分享

发布时间：2023-01-15 20:14:34 来源：网络
.
穷则独善其身，达则兼善天下。没有梦想的人到达不了成功的彼岸，也就因此而看不到成功的辉煌。没有梦想的人生是失败的，因为他们根本看不到生命的意义。

这是比较流行的CSS圆角，制作方法和理解都有困难，但看完这篇文章，就能掌握这种方法。

先看效果：

制作方法

为了更好的理解，先用简单的代码为例。

XHTML代码：

XML/HTML Code复制内容到剪贴板
  1. <bclass="top">
  2. <bclass="b1"></b>
  3. <bclass="b2"></b>
  4. <bclass="b3"></b>
  5. <bclass="b4"></b>
  6. </b>

CSS代码：

CSS Code复制内容到剪贴板
  1. b{
  2. display:block;
  3. }
  4. .b1,.b2,.b3,.b4{
  5. overflow:hidden;
  6. height:1px;
  7. border-left:1pxsolid#000;
  8. border-right:1pxsolid#000;
  9. }
  10. .b1{
  11. margin:05px;
  12. background:#000;
  13. }
  14. .b2{
  15. margin:03px;
  16. border-width:02px;
  17. }
  18. .b3{
  19. margin:02px;
  20. }
  21. .b4{
  22. height:2px;
  23. margin:01px;
  24. }

这段代码效果如下图：

.top 是一个容器，.b1 是圆角顶部的横线，.b2 .b3 .b4 分别是设置递减的左右 margin 和相应的 border ，他们便组成了圆角圆弧中的几个点。合在一起，就组成了上半部分的圆角。看下面的动态图就能很好的理解了。

为了看的更清楚，图中用了较粗的“线”和“点”，看起来锯齿比较明显，而网页上设置的 1px、2px 就不容易看出锯齿了。

下半部分和上半部分的原理是一样的，只是“倒”过来了。

完整的代码

XTHML代码：

XML/HTML Code复制内容到剪贴板
  1. <divid="box"><!--容器-->
  2. <bclass="top"><!--上半部分圆角-->
  3. <bclass="b1"></b><bclass="b2"></b><bclass="b3"></b><bclass="b4"></b>
  4. </b>
  5. <divid="content">内容区</div>
  7. <bclass="bottom"><!--下半部分圆角-->
  8. <bclass="b4"></b><bclass="b3"></b><bclass="b2"></b><bclass="b1"></b>
  9. </b>
  10. </div>

CSS代码：

CSS Code复制内容到剪贴板
  1. b{
  2. display:block;
  3. }
  4. .b1,.b2,.b3,.b4{
  5. overflow:hidden;
  6. height:1px;
  7. border-left:1pxsolid#000;
  8. border-right:1pxsolid#000;
  9. }
  10. .b1{
  11. margin:05px;
  12. background:#000;
  13. }
  14. .b2{
  15. margin:03px;
  16. border-width:02px;
  17. }
  18. .b3{
  19. margin:02px;
  20. }
  21. .b4{
  22. height:2px;
  23. margin:01px;
  24. }
  25. #content{
  26. border:solid#000;
  27. border-width:01px;
  28. }

3D效果CSS圆角

先看效果吧：

下面给出相应的代码。

XHTML代码：

XML/HTML Code复制内容到剪贴板
  1. <divclass="box">
  2. <bclass="b1"></b><bclass="b2"></b><bclass="b3"></b><bclass="b4"></b>
  3. <divclass="content">
  4. <h1>3D效果CSS圆角</h1>
  5. </div>
  6. <bclass="b4b"></b><bclass="b3b"></b><bclass="b2b"></b><bclass="b1b"></b>
  7. </div>

CSS代码：

CSS Code复制内容到剪贴板
  1. *{
  2. margin:0;
  3. padding:0;
  4. }
  5. .box{
  6. width:400px;
  7. margin:20pxauto;
  8. }
  9. h1{
  10. font-size:2em;
  11. color:#fff;
  12. padding:20px;
  13. text-align:center;
  14. }
  15. b{
  16. display:block;
  17. overflow:hidden;
  18. height:1px;
  19. background:#96C2F1;
  20. border-width:01px;
  21. border-style:solid;
  22. }
  23. .b1{
  24. margin:05px;
  25. background:#fff;
  26. border:none;
  27. }
  28. .b2{
  29. border-right:#eee;
  30. }
  31. .b3{
  32. border-right:#ddd;
  33. }
  34. .b4{
  35. border-right:#aaa;
  36. }
  37. .b4b{
  38. border-left:#eee;
  39. }
  40. .b3b{
  41. border-left:#ddd;
  42. }
  43. .b2b{
  44. border-left:#aaa;
  45. }
  46. .b2,.b3,.b4{
  47. border-left-color:#fff;
  48. }
  49. .b4b,.b3b,.b2b{
  50. border-right-color:#999;
  51. }
  52. .b2,.b2b{
  53. margin:03px;
  54. border-width:02px;
  55. }
  56. .b3,.b3b{
  57. margin:02px;
  58. }
  59. .b4,.b4b{
  60. height:2px;margin:01px;
  61. }
  62. .b1b{
  63. margin:05px;
  64. background:#999;
  65. border:none;
  66. }
  67. .content{
  68. background:#96C2F1;
  69. border-left:1pxsolid#fff;
  70. border-right:1pxsolid#999;
  71. }

到此这篇关于CSS的一些圆角图形实例分享就介绍到这了。如果你能勇敢承认自己的错误，那么你一定能从这个错误中获益。因为承认错误，不仅可以赢得别人的尊敬，更可增加你的自尊。更多相关CSS的一些圆角图形实例分享内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章:
标签： 圆角 CSS
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图