求div css圆角范例(200分)

作者&投稿：窄婕（若有异议请与网页底部的电邮联系）

css怎样实现圆角div~

没有直接实现的代码。用图片吧。有好多代码叠加的圆角，不过代码多，直接用图片吧

无标题文档

*{padding:0;margin:0;}
.container {width:50%;margin:10px auto;}
.holder2 {color:#000;}
/*无图片的圆角框*/
.b1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#aaa; margin:0 5px;}
.b2 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;}
.b3 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;}
.b4 {height:2px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;}
.content {border-right:1px solid #aaa; height:200px;border-left:1px solid #aaa;}

CSS的圆角框

有几个例子分割线隔开

html>
<head>
<title>css圆角效果</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFFFFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>

<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
无图片实现圆角框
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
<br>

<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>

........................................................

<style type="text/css">

.b1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#9BD1FA; margin:0 5px;}
.b2 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff;
border-right:2px solid #9BD1FA; border-left:2px solid #9BD1FA; margin:0 3px;}
.b3 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff;
border-right:1px solid #9BD1FA; border-left:1px solid #9BD1FA; margin:0 2px;}
.b4 {height:2px; font-size:1px; overflow:hidden; display:block; background:#fff;
border-right:1px solid #9BD1FA; border-left:1px solid #9BD1FA; margin:0 1px;}
</style>
接着看页面代码：
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<br>ssadfsadfsdfdf</br>
<br>ssadfsadfsdfdf</br>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
当然你也可以用其他的标签<div>或者<span><a>之类，应该也是可以的

.............................................................................

<style type="text/css">
div#nifty{margin: 0 10%;background: #9BD1FA;width: 300px;word-break:break-all;}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
<center>
<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<span style="font-size:16;color:#fff;font-family:华文行楷;">
家穷人丑一米四九，<br>
小学文化农村户口。<br>
破屋三间病猪一头，<br>
冷锅热灶老婆没有。<br>
今日上网广征女友，<br>
革命道路并肓携手。
</span>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>

..........................................

<style type="text/css">

#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:1em;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-width:0 1px;}

</style>

<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">
<h1>圆角边框</h1>
<p>看看吧<br />http://www.ebookit.cn/index.html</p>

<h2>不使用图片的边框</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>

//网络转载…

.........................................................
<style type="text/css">

</style>
<div class="testlayer">
<div id="ibox">
<div id="ibox01" class="testboxbg"></div>
<div id="ibox02" class="testboxbg"></div>
<div id="ibox03" class="testboxbg"></div>
<div id="ibox04" class="testboxbg"></div>
<div id="ibox05" class="testboxbg"></div>
<div id="boxcon" class="testboxcon"></div>
<div id="ibox05" class="testboxbg"></div>
<div id="ibox04" class="testboxbg"></div>
<div id="ibox03" class="testboxbg"></div>
<div id="ibox02" class="testboxbg"></div>
<div id="ibox01" class="testboxbg"></div>
</div>
</div>

</body>
</html>

<html>
<head>
<title>css圆角--www.xihucuyu.com</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>

全是代码没有解释！
给你解释下是怎么做出来的吧！

其实就是一个div套一个div再套一个div外面的div总是比里面小一个像素，这样视觉效果看出来的就是一个圆角！

你可以手动自己写写！别看别人的代码好的多！

这种代码一点都不实用有太多的局限性我给个结构算了
上下的那四个span 就是四个圆角用css spring 去做图方便简单还复用

下面的title 就是标题了下面的就是内容了

css 自己写吧相信我这个结构算是现在相对比较好的一个圆角制作方法了
别搞那些什么无图实现圆角只能说能实现现实操作中太不实用也别搞什么上面切个大头下面切个大尾巴的中间在纵向平铺只要是那种外围是一条线的圆角我这个都能实现

<div class="box">
<span class="rc_tp"><span></span></span>
<div class="title"></div>
<div class="content"></div>
<span class="rc_bt"><span></span></span>
</div>

这个问题简单不用长篇大论好不!
<fieldset>
<legend >表格线上写字</legend>
<div>这里添加正常的文字</div>
</fieldset>
被骗了才20分呀,还写200分伤心中!

有JS实现圆角的！

泊头市17524789007： css 代码 :div圆角矩形怎么写? - ？
汲疤百优： 朋友,我给你来个实例吧,希望采纳答案,谢谢. CSS代码: div#nifty{margin:0;background:#9BD1FA}p {padding:10px}div.rtop {display:block;background:#fff}div.rtop div {display:block;height:1px;overflow:hidden;background:#9BD1FA}div.r1{...

泊头市17524789007： 如何用CSS实现圆角框? - ？
汲疤百优： //css代码.divbox{ width:200px;}.div1{ background:#999999; border-left:#999999 solid 1px; border-right:solid 1px #999; margin:0px 2px; height:1px; overflow:hidden;}.div2{background:#FFF; border-left:#999999 solid 1px; border-right:solid 1px #999; ...

泊头市17524789007： 用DIV+CSS写圆角代码怎么写? 详细点谢谢!？
汲疤百优： HTML代码 <html> <head> <title>3D圆角</title> <style type=text/css> .raised{background:transparent;width:40%;} .raised h1,.raised p{margin:0 10px;} .raised h1{font-size:2em;color:#fff;} .raised p{padding-bottom:0.5em;} .raised .b1,.raised .b2,....

泊头市17524789007： div+css 圆角的制作代码谁有发几个参考下？
汲疤百优： style type=＂text/css＂>#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;} #xsnazzy h1 {font-size:2.5em; color:#fff;} #xsnazzy h2 {font-size:2em;color:#06a; border:0;} #xsnazzy p {padding-bottom:0.5em;} #xsnazzy h2 {...

泊头市17524789007： 求简单的css圆角方法.？
汲疤百优： <html><head><title>简写CSS圆角</title><style type=＂text/css＂>.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #5c5c5c;border-right:1px...

泊头市17524789007： css图片定义DIV圆角!最简洁的代码.. - ？
汲疤百优： <div class=＂class＂> <div class=＂style＂><h1>TITLE</h1><ul>LIST</ul> </div> </div> h1 ul div#class div#style各用一个角,懂?原来的内部padding在h1和ul上设置一般的方框都是横向扩展或者纵向扩展,没必要四个,只需两个图片,即一...

泊头市17524789007： 如何用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＂><head><meta http-equiv=＂Content-Type＂ content=＂text/...

泊头市17524789007： CSS样式怎么实现圆角矩形功能? - ？
汲疤百优： 用border-radius属性来实现圆角功能 border-radius使用案例1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19<!doctype html> <html> <head> <metacharset='UTF-8'/> <title>圆角功能</title> <styletype=＂text/css＂>#div1{border:1px solid #f00;...

泊头市17524789007： 网页CSSdiv圆角？
汲疤百优： 一般来说这样的圆角是分上中下三部分来做的,中间的部分背景纵向重复,上和下不重复:<style>.top {background-image: url(../Images/tf.png);background-repeat: no-repeat;background-position: center top;height:10px;padding:0px;margin:0px;}....

泊头市17524789007： DIV如何实现图片边角变圆？
汲疤百优： CSS2中不支持圆角.一般是用图片模拟.或者用N层div套出来,但太麻烦不推荐用. 等CSS3真正推广开了,实现这些效果就简单了

你可能想看的相关专题

星空见康网

求div css圆角范例(200分)

你可能想看的相关专题