今天看了下think的圆角矩形的div＋css实现法。他大致是这样做的。
根据margin的边距一点一点累加，或者累减。相对实现起来效果还算不错！就练习，研究了一下～
立即学习“前端免费学习笔记（深入）”；
html part
立即学习“前端免费学习笔记（深入）”；
<!-- round main --> <div id="round"> <!-- r_top ---> <div class="r_top"> <em class="r_a"></em> <em class="r_b"></em> <em class="r_c"></em> <em class="r_d"></em> </div> <!-- //r_top end ---> <!-- r_box ---> <div class="r_box"> 这是一个圆角矩形!<br /> 这是一个圆角矩形!<br /> 这是一个圆角矩形!<br /> 这是一个圆角矩形!<br /> 这是一个圆角矩形!<br /> 这是一个圆角矩形!<br /> </div> <!-- //r_box end ---> <!-- r_bottom ---> <div class="r_bottom"> <em class="r_d"></em> <em class="r_c"></em> <em class="r_b"></em> <em class="r_a"></em> </div> <!-- //r_bottom end---> </div> <!-- // round main end-->
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
css part
div,em{ margin:0; padding:0;} #round{ width:500px; margin:0px 20px; } .r_top,.r_bottom{ display:block; font-size:1px;} .r_a,.r_b,.r_c,.r_d{ display:block; overflow:hidden; } .r_a,.r_b,.r_c{ height:1px;} .r_b,.r_c,.r_d{background:#CCFF66; } .r_box{ background:#CCFF66; padding-left:10px; padding-right:10px;} .r_a{ margin:0 5px; } .r_b{ margin:0 3px; border-width:0 2px; } .r_c{ margin:0 2px; } .r_d{ height:2px; margin:0 1px; }
立即学习“前端免费学习笔记（深入）”；
测试一下兼容性。目前还可以。还没发现什么大的问题～～。
立即学习“前端免费学习笔记（深入）”；
为了更好的理解，先用简单的代码为例。XHTML代码：<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>CSS代码：b{display:block;}.b1,.b2,.b3,.b4{overflow:hidden;height:1px;border-left:1px solid #000;border-right:1px solid #000;}.b1{margin:0 5px;background:#000;}.b2{margin:0 3px;border-width:0 2px;}.b3{margin:0 2px;}.b4{height:2px;margin:0 1px;}
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
604
收藏
