您现在的位置是：网站首页> 编程资料编程资料

CSS的一些圆角图形实例分享CSS3制作圆角图片和椭圆形图片Css3圆角边框制作代码CSS3绘制圆角矩形的简单示例使用css实现圆角图形绘制纯CSS实现圆角折叠菜单的方法CSS实现反方向圆角的示例代码

2021-09-05 1125人已围观

简介 这篇文章主要介绍了CSS的一些圆角图形实例分享,包括带有3D效果的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. }  

这段代码效果如下图：

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

为了看的更清楚，图中用了较粗的“线”和“点”，看起来锯齿比较明显，而网页上设置的 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圆角

先看效果吧：

下面给出相应的代码。

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><提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：CSS3绘制圆角矩形的简单示例CSS3制作圆角图片和椭圆形图片Css3圆角边框制作代码CSS的一些圆角图形实例分享使用css实现圆角图形绘制纯CSS实现圆角折叠菜单的方法CSS实现反方向圆角的示例代码

    下一篇：纯CSS实现的菱形导航菜单效果代码基于css3的属性transition制作菜单导航效果CSS3实现银灰色动画效果的导航菜单代码css3实现的多级渐变下拉菜单导航效果代码div+css实现蓝色vista风格css导航菜单效果div+css实现仿猪八戒首页导航菜单效果使用CSS3制作响应式导航菜单的方法纯CSS实现的水平下拉导航菜单特效源码纯CSS3实现的华丽网站下拉菜单导航特效源码纯CSS3实现的圆形拥有二级菜单的菜单导航特效源码

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网