div+css制作圆角矩形

最新推荐文章于 2021-12-14 17:08:49 发布

dfzone

最新推荐文章于 2021-12-14 17:08:49 发布

阅读量1.8k

点赞数

分类专栏： CSS学习笔记文章标签： div css class up 百度

本文链接：https://blog.csdn.net/dfzone/article/details/3867010

版权

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

1 篇文章 0 订阅

订阅专栏

学习了用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，

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

dfzone

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
div+css制作圆角矩形

学习了用div+css制作圆角矩形，先记下来div+css制作圆角矩形<!--body{background:white;}#main{margin:0 20%;background:red;}.up{background:white;}.up div{height:1px;overflow:hidden;ba
复制链接

扫一扫