南强小屋 Design By 杰米

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

先看效果:
CSS的一些圆角图形实例分享
制作方法

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

XHTML代码:

XML/HTML Code复制内容到剪贴板
  1. <b class="top">  
  2. <b class="b1"></b>  
  3. <b class="b2"></b>  
  4. <b class="b3"></b>  
  5. <b class="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:1px solid #000;   
  8. border-right:1px solid #000;   
  9. }   
  10. .b1{   
  11. margin:0 5px;   
  12. background:#000;   
  13. }   
  14. .b2{   
  15. margin:0 3px;   
  16. border-width:0 2px;   
  17. }   
  18. .b3{   
  19. margin:0 2px;   
  20. }   
  21. .b4{   
  22. height:2px;   
  23. margin:0 1px;   
  24. }  

这段代码效果如下图:
CSS的一些圆角图形实例分享
.top 是一个容器,.b1 是圆角顶部的横线,.b2 .b3 .b4 分别是设置递减的左右 margin 和相应的 border ,他们便组成了圆角圆弧中的几个点。合在一起,就组成了上半部分的圆角。看下面的动态图就能很好的理解了。
CSS的一些圆角图形实例分享
为了看的更清楚,图中用了较粗的“线”和“点”,看起来锯齿比较明显,而网页上设置的 1px、2px 就不容易看出锯齿了。

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

完整的代码

XTHML代码:

XML/HTML Code复制内容到剪贴板
  1. <div id="box"><!--容器-->  
  2. <b class="top"><!--上半部分圆角-->  
  3. <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>  
  4. </b>  
  5. <div id="content">内容区</div>  
  6.   
  7. <b class="bottom"><!--下半部分圆角-->  
  8. <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="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:1px solid #000;   
  8. border-right:1px solid #000;   
  9. }   
  10. .b1{   
  11. margin:0 5px;   
  12. background:#000;   
  13. }   
  14. .b2{   
  15. margin:0 3px;   
  16. border-width:0 2px;   
  17. }   
  18. .b3{   
  19. margin:0 2px;   
  20. }   
  21. .b4{   
  22. height:2px;   
  23. margin:0 1px;   
  24. }   
  25. #content{   
  26. border:solid #000;   
  27. border-width:0 1px;   
  28. }  

3D效果CSS圆角

先看效果吧:
CSS的一些圆角图形实例分享
下面给出相应的代码。

XHTML代码:

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

CSS代码:

CSS Code复制内容到剪贴板
  1. *{   
  2. margin:0;   
  3. padding:0;   
  4. }   
  5. .box{   
  6. width:400px;   
  7. margin:20px auto;   
  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:0 1px;   
  21. border-style:solid;   
  22. }   
  23. .b1{   
  24. margin:0 5px;   
  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:0 3px;   
  54. border-width:0 2px;   
  55. }   
  56. .b3,.b3b{   
  57. margin:0 2px;   
  58. }   
  59. .b4,.b4b{   
  60. height:2px; margin:0 1px;   
  61. }   
  62. .b1b{   
  63. margin:0 5px;   
  64. background:#999;   
  65. border:none;   
  66. }   
  67. .content{   
  68. background:#96C2F1;   
  69. border-left:1px solid #fff;   
  70. border-right:1px solid #999;   
  71. }  
标签:
CSS,圆角

南强小屋 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
南强小屋 Design By 杰米

评论“CSS的一些圆角图形实例分享”

暂无CSS的一些圆角图形实例分享的评论...

热搜电影

爱尔兰人 The Irishman
爱尔兰杀手(港) / 听说你刷房子了 / I Heard You Paint Houses
信条 Tenet
TENET天能(港/台) / 时空追捕 / TENƎ⊥ / Tempus / 天呐天(豆友译名)
末日逃生 Greenland
末世绿洲(港) / 天劫倒数(台) / 格陵兰陷落 / 格陵兰 / 地球陷落(豆友译名)
卡拉什尼科夫 Kalashnikov / AK-47
Kalashnikov.2020.RUSSIAN.1080p.BluRay.x264
欢乐好声音/歌唱秀 Sing.2016
欢乐好声音/歌唱秀/星梦动物园(港)/演唱/歌唱/动物园好声音
姜子牙
Legend of Deification