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

使用Div+CSS纯图片实现圆角矩形的方法小结css三种方法实现div在浏览器水平居中一个div在浏览器水平居中的实现方法div+CSS制作类似微信对话气泡效果的实例总结EXCEL表格中的#DIV/0!等符号怎么全部当计算?让DIV水平垂直居中的两种完美方法推荐学习DIV+CSS网页布局之混合布局学习DIV+CSS网页布局之三列布局学习DIV+CSS网页布局之两列布局学习DIV+CSS网页布局之一列布局使用div+CSS将页脚始终控制在页面最下方的方法

2023-10-23 329人已围观

简介 这篇文章主要介绍了使用Div+CSS纯图片实现圆角矩形的方法小结,CSS3中用代码绘制圆角矩形非常方便,而本文要介绍的则是利用图片来实现兼容性更强的方法,需要的朋友可以参考下

对，你没有看错，就是“纯图片”，不是纯代码实现而是利用图片来实现的圆角。你或许会不以为然，可是我想告诉你的是即使将来CSS3圆角实现全浏览器兼容，但在当下图片圆角依旧是主流，丰富的图片效果（渐变、阴影、透明度、圆角、浏览器兼容、开发维护效率）这些是用代码实现远远不可比拟的。所以说图片圆角在实战中的重要性是有目共睹的，掌握图片圆角的技巧为日常开发打下坚实的基础。下面开始剖析各个图片圆角的实现技巧，你会发现原来用图片实现的圆角也会那么的丰富多彩！

大致的demo就是这样：

2016222111500723.png (381×364)
1.全部浮动法
如果一个CSS初学者写图片圆角效果，那么推荐使用全部浮动法，简单且容易上手。其原理就是左圆角左浮动，主体也左浮动，右圆角右浮动，外包div 平铺背景图片。很直观的就实现出图片圆角效果。缺点是之后会需要清除浮动，且因背景图片全部平铺，所以左右俩个圆角必须左右覆盖背景上不能让圆角留白处透明出下方的图片。
HTML代码如下：

XML/HTML Code复制内容到剪贴板
  1. <div class="floatMethod">  
  2.   <div class="left">div>  
  3.   <div class="middle">全部浮动法div>  
  4.   <div class="right">div>  
  5. div>  

CSS代码如下：

CSS Code复制内容到剪贴板
  1. .floatMethod{width:350px; height:32px; background:url('roundBox_middle.gif') left top repeat-x;}   
  2. .floatMethod .middle{float:left; line-height:32px; padding:0 0 0 10px;}   
  3. .floatMethod .left{float:left; width:6px; height:32px; background:url('roundBox_left.gif') left top no-repeat;}   
  4. .floatMethod .rightright{float:rightright; width:8px; height:32px; background:url('roundBox_right.gif') left top no-repeat;}  

优点：简单、方便、易上手。
缺点：需要清除浮动、圆角图片留白处不能透明。
原理简析：三个div 一起浮动，左右俩个div 放置圆角，外包div 使用背景平铺。

2.左右浮动法
个人认为左右浮动发是全部浮动法的升级版，修复了圆角图片留白处不能透明的缺陷。原理与全部浮动法有些类似，但现在左圆角左浮动，右圆角右浮动，主体直接放后面。主体利用margin 挤压使得俩个圆角留白处可以透明处下面的背景。
HTML代码如下：

XML/HTML Code复制内容到剪贴板
  1. <div class="newFloatMethod">  
  2.   <div class="left">div>  
  3.   <div class="right">div>  
  4.   <div class="middle">左右浮动法div>  
  5. div>  

CSS代码如下：

CSS Code复制内容到剪贴板
  1. .newFloatMethod{width:350px; height:32px;}   
  2. .newFloatMethod .middle{line-height:32px; margin:0 8px 0 6px; padding:0 0 0 10px; background:url('images/roundBox_middle.gif') left top repeat-x;}   
  3. .newFloatMethod .left{float:left; width:6px; height:32px; background:url('images/roundBox_left.gif') left top no-repeat;}   
  4. .newFloatMethod .rightright{float:rightright; width:8px; height:32px; background:url('images/roundBox_right.gif') left top no-repeat;}  

优点：简单、易上手。
缺点：需要清除浮动。
原理简析：左圆角左浮动，右圆角右浮动，主体直接放后

上一篇：Div和CSS编写中对包含选择器和通配选择器的使用如何让一个div居于页面正中间【实现方法】css三种方法实现div在浏览器水平居中一个div在浏览器水平居中的实现方法div+CSS制作类似微信对话气泡效果的实例总结EXCEL表格中的#DIV/0!等符号怎么全部当计算?让DIV水平垂直居中的两种完美方法推荐学习DIV+CSS网页布局之混合布局学习DIV+CSS网页布局之三列布局学习DIV+CSS网页布局之两列布局学习DIV+CSS网页布局之一列布局

下一篇：全面总结CSS代码的编写规范及优化建议CSS代码书写规范究极指南编写灵活、稳定、高质量的HTML和css代码规范指南css代码缩写 div+css布局代码简写规范19楼论坛的前端CSS代码规范介绍让样式表CSS代码更加专业规范闭合浮动元素让CSS代码更规范-CSS教程-网页制作-网页教学网分享20条编写 CSS 代码的建议

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网