当前位置：首页 → 问答吧 → 这种圆角的怎么用DIV+CSS做

这种圆角的怎么用DIV+CSS做

时间：2010-10-06

来源：互联网

高手们,这种上下是圆角的怎么才能做,我试了很久都不行,麻烦大家帮看一下,谢谢

附件

654364536.jpg (59.6 KB)

2010-10-6 11:00

作者: asp68 发布时间: 2010-10-06

没人帮帮我吗

作者: asp68 发布时间: 2010-10-06

不用适应宽度的话直接图片搞定阿。。。

作者: leilay 发布时间: 2010-10-06

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Div+CSS式圆角</title> </head> <style> .l1{background:#fff; width:4px; height:1px; float:left;OVERFLOW: hidden;} .r1{background:#fff; width:4px; height:1px; float:right;OVERFLOW: hidden;} .l2{background:#fff; width:2px; height:1px; float:left;OVERFLOW: hidden;} .r2{background:#fff; width:2px; height:1px; float:right;OVERFLOW: hidden;} .l3{background:#fff; width:1px; height:2px; float:left;OVERFLOW: hidden;} .r3{background:#fff; width:1px; height:2px; float:right;OVERFLOW: hidden;} .x{clear:both} #top .t{background:#99BCFC; width:230px; height:25px;} #top .c{background:#FFFFFF; border:1px #99BCFC solid; width:208px;height:250px; padding:0 10px;} #top .b{background:#99BCFC;width:230px; height:4px;} </style> <body> <div id="top"> <div class="t"> <div class="l1"></div> <div class="r1"></div> <div class="x"></div> <div class="l2"></div> <div class="r2"></div> <div class="x"></div> <div class="l3"></div> <div class="r3"></div> <div class="x"></div> </div> <div class="c"> Div+CSS式圆角 </div> <div class="b"> <div class="l3"></div> <div class="r3"></div> <div class="x"></div> <div class="l2"></div> <div class="r2"></div> <div class="x"></div> <div class="l1"></div> <div class="r1"></div> <div class="x"></div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

底部与所要求的还有点差别。

[ 本帖最后由 lyw860 于 2010-10-6 17:36 编辑 ]

作者: lyw860 发布时间: 2010-10-06

<html> <head> <style> #a{ border-left:1px #69f solid; border-right:1px #69f solid; width:300px; height:400px; } .b{ height:1px; overflow:hidden; border-left:1px #69f solid; border-right:1px #69f solid; } </style> </head> <body> <div> <div class="b" style="margin-left:3px;width:294px;background:#69f"></div> <div class="b" style="margin-left:2px;width:296px;"></div> <div class="b" style="margin-left:1px;width:298px"></div> <div id="a"> DIV+CSS圆角边框 </div> <div class="b" style="margin-left:1px;width:298px"></div> <div class="b" style="margin-left:2px;width:296px;"></div> <div class="b" style="margin-left:3px;width:294px;background:#69f"></div> </div> </body> </html>
提示：您可以先修改部分代码再运行

这种是边框的，与上面实心圆角实现的远离不一样

作者: lyw860 发布时间: 2010-10-06

这种圆角的怎么用DIV+CSS做

附件

热门阅读

热门下载