贴一段CSS代码:
<style type="text/css"> #info {height:450px;} dl.bot_rgt {background:#7f7f9c url(img/c_tl.gif) top left no-repeat; margin:5px 0 0 50px; padding:0; float:left; margin-right:10px; width:40%; display:inline;} dl.bot_rgt dt {background:transparent url(img/c_tr.gif) top right no-repeat; padding:10px; text-align:center; color:#fff;} dl.bot_rgt dd {background:#eee url(img/c_bl.gif) bottom left no-repeat; padding:0; margin:0;} dl.bot_lft {background:#7f7f9c url(img/c_tl.gif) top left no-repeat; margin:5px 0; padding:0; float:left; margin-right:10px; width:40%;} dl.bot_lft dt {background:transparent url(img/c_tr.gif) top right no-repeat; padding:10px; text-align:center; color:#fff;} dl.bot_lft dd {background:#eee url(img/c_br.gif) bottom right no-repeat; padding:0; margin:0;} dl.top_rgt {background:#eee url(img/c_bl.gif) bottom left no-repeat; margin:5px 0 0 50px; padding:0; float:left; margin-right:10px; width:40%; display:inline;} dl.top_rgt dt {background:#7f7f9c url(img/c_tl.gif) top left no-repeat; padding:10px; text-align:center; color:#fff;} dl.top_rgt dd {background:transparent url(img/c_br.gif) bottom right no-repeat; padding:0; margin:0;} dl.top_lft {background:#eee url(img/c_bl.gif) bottom left no-repeat; margin:5px 0; padding:0; float:left; margin-right:10px; width:40%;} dl.top_lft dt {background:#7f7f9c url(img/c_tr.gif) top right no-repeat; padding:10px; text-align:center; color:#fff;} dl.top_lft dd {background:transparent url(img/c_br.gif) bottom right no-repeat; padding:0; margin:0;} dd p {margin:0; padding:10px; line-height:1.3em;} </style>
里面的dl.bot_rgt是实现圆角的代码,可大家仔细看下,这里还差了一个脚,右下角的圆角没有实现的,而对应的“dl.top_lft dd {background:transparent url(img/c_br.gif) bottom right no-repeat; padding:0; margin:0;}”这个就实现了。
不知道dd,dt,这些东西该如何修改才能实现右下角这个圆角。是不是还要增加个其他的样式,比如dl之类的?
现在我不知道怎么在源代码里加入这个:
<div id="info"> <dl class="bot_rgt"> <dt>BOTTOM RIGHT SQUARE CORNER</dt> <dd><p>This is the place to put your descriptive text. The three curved corners and one square corner box requires no extra markup, just a standard definition list with three background images.</p></dd> </dl>
请知道的大哥大姐帮个忙了。。。
dl { border-radius: 5px; border:1px solid #ccc; }
用css3的圆角实现非常简单
把html代码改成
<div id="info"> 这是圆角 </div>
把你的css代码全部删掉,然后替换成
#info { border-radius: 5px; border:1px solid #ccc; }
但是,ie9以下不支持这种效果