css高手请进！用div+css制作圆角矩形的原理
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css高手请进！用div+css制作圆角矩形的原理相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">
<HTML XMLns="http://www.w3.org/1999/xHTML" lang="gb2312">
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=gb2312" />
<title>div+CSS圆角矩形</title>
<style type="text/CSS">
bodypadding: 20px;background-color: #FFF;font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif
div#nifty margin: 0 10%;background: #9BD1FA
p padding:10px
div.rtop, div.rbottomdisplay:block;background: #FFF
div.rtop div, div.rbottom divdisplay:block;height: 1px;overflow: hidden; background: #9BD1FA
div.r1margin: 0 5px
div.r2margin: 0 3px
div.r3margin: 0 2px
div.rtop div.r4, div.rbottom div.r4margin: 0 1px;height: 2px
</style>
</head>
<body>
<div id="nifty">
<div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
<p>这是您要放的内容！</p>
<div class="rtop"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
</div>
</body>
</hmtl>
这是制作圆角矩形的代码，小弟看不懂，谁能帮我详细的解释一下啊!
比如：
大层div宽度为100px;
圆角开始：上
第一行div，高度为1px; 宽度为94px; 左右两边挤开3px，
第二行div，高度为1px; 宽度为96px; 左右两边挤开2px，
第二行div，高度为1px; 宽度为98px; 左右两边挤开1px，
第四行DIV： 内容
圆角开始：下
第一行div，高度为1px; 宽度为98px; 左右两边挤开1px，
第二行div，高度为1px; 宽度为96px; 左右两边挤开2px，
第二行div，高度为1px; 宽度为94px; 左右两边挤开3px，
两边的边距自定，这样就形成一个狐形了。 参考技术A <title>div+CSS圆角矩形</title> <!--头部 -->
<style type="text/CSS">
bodypadding: 20px; DIV里的页面内容与四周边距的距离（上 下 左都10px边距）
background-color: #FFF;背景颜色
font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif 字体大小 字体类型
div#nifty margin: 0 10%; 这个在这里应该是DIV的上边距和DIV两边的距离
background: #9BD1FA 背景颜色
p padding:10px 所有P标签的间距全为10
div.rtop, div.rbottomdisplay:block;background: #FFF
div.rtop div, div.rbottom divdisplay:block;
height: 1px;高度
overflow: hidden;
background: #9BD1FA 背景颜色
div.r1margin: 0 5px 这个不用说了把
div.r2margin: 0 3px
div.r3margin: 0 2px
div.rtop div.r4, div.rbottom div.r4margin: 0 1px;height: 2px
</style>
</head>
<body>
<div id="nifty">
<div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
<p>这是您要放的内容！</p>
<div class="rtop"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>
</div>
</body>
</hmtl> 参考技术B 就像楼上说的，拼起来的，就像我们用长度不一，高为1px的直线一条一条的叠起来达到预期效果，圆角它是占用了一定的高度空间的，如果你画的圆角比较大的话，它需要的在垂直方向的线条就越多，就像堆木条一样。如果你在dreamweaver的设计视图下，你把鼠标移动到圆角那里，稍微上下移动，你就可以感觉到圆角原来也是一些直线而已，只不过它们长短的不一，看起来就像圆角而已。可以说这是CSS的一些小技巧。 参考技术C 其实很简单，圆角它靠1px的高度来拼起来的
比如：
大层div宽度为100px;
圆角开始：上
第一行div，高度为1px;
宽度为94px;
左右两边挤开3px，
第二行div，高度为1px;
宽度为96px;
左右两边挤开2px，
第二行div，高度为1px;
宽度为98px;
左右两边挤开1px，
第四行DIV：
内容
圆角开始：下
第一行div，高度为1px;
宽度为98px;
左右两边挤开1px，
第二行div，高度为1px;
宽度为96px;
左右两边挤开2px，
第二行div，高度为1px;
宽度为94px;
左右两边挤开3px，
两边的边距自定，这样就形成一个狐形了。
css圆角矩形的制作
请问高手们，这样的圆角请问有几种方法做呀。
就我所知有： 设置背景图片 还有就是重叠（就是把多个正方形的四个角按一定弧度堆出个圆角来，缺少：明明只需要一个div的，结果要重叠出圆角可能就需要多写十来个呢。） 还有就是css3.0 该手册中有圆角参数。但是IE浏览器支持它的很少。其它浏览器最新版本基本都支持。可以下载一个css3.0手册来看看 参考技术A 目前只知道两种……图片做……css3做……IE9版本以下的IE浏览器不支持用css3做的圆角 参考技术B 去百度撒！！！以上是关于css高手请进！用div+css制作圆角矩形的原理的主要内容，如果未能解决你的问题，请参考以下文章