div+css制作圆角矩形

最新推荐文章于 2021-08-03 21:08:00 发布

原创最新推荐文章于 2021-08-03 21:08:00 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#div #css #class #up #百度

CSS学习笔记专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用div+CSS实现圆角矩形的方法。通过设置不同层级的div及其边距和高度，可以创建平滑的圆角效果。适用于网页设计中需要圆角元素的情况。

学习了用div+css制作圆角矩形，先记下来

<html> <head> <title>div+css制作圆角矩形</title> <mce:style></mce:style><style mce_bogus="1">body { background:white; } #main { margin:0 20%; background:red; } .up { background:white; } .up div { height:1px; overflow:hidden; background:red; } .r1{margin:0 6px;} .r2{margin:0 4px;} .r3{margin:0 3px;} .r4{margin:0 2px;} .r5{margin:0 1px;height:5px；}</style> </head> <body> <div id="main"> <div class="up"> <div class="r1"></div> <div class="r2"></div> <div class="r3"></div> <div class="r4"></div> <div class="r5"></div> </div> 内容<br> 内容<br> 内容<br> 内容<br> <div class="up"> <div class="r5"></div> <div class="r4"></div> <div class="r3"></div> <div class="r2"></div> <div class="r1"></div> </div> </div> </body> </html>

以下摘自百度知道

圆角它靠1px的高度来拼起来的
比如：大层div宽度为100px;

圆角开始：上

第一行div，高度为1px; 宽度为94px; 左右两边挤开3px，
第二行div，高度为1px; 宽度为96px; 左右两边挤开2px，
第三行div，高度为1px; 宽度为98px; 左右两边挤开1px，

内容

圆角开始：下

第一行div，高度为1px; 宽度为98px; 左右两边挤开1px，
第二行div，高度为1px; 宽度为96px; 左右两边挤开2px，
第三行div，高度为1px; 宽度为94px; 左右两边挤开3px，

两边的边距自定，这样就形成一个弧形了。