- friendship connection
自由淘
午梅
万德尼科
爱特流体控制有限公司
ccie real lab
大连鲁班软件有限公司
富地机械制造有限公司
尚和会馆
css 代码简练的圆角矩形
wumei2009-09-26 23:07:10- 圆角矩形
css圆角矩形
这里放置文字，四个圆角的圆角框，不需要定义特殊的标记，只需要四个圆角图片给定义列表dl做背景。
- 圆角矩形一 底部右侧无圆角
这里放置文字，只有三个圆角的圆角框，不需要定义特殊的标记，只需要三个圆角图片给定义列表dl做背景。
- 圆角矩形一 底部左侧无圆角
这里放置文字，只有三个圆角的圆角框，不需要定义特殊的标记，只需要三个圆角图片给定义列表dl做背景。
- 圆角矩形一 顶部右侧无圆角
这里放置文字，只有三个圆角的圆角框，不需要定义特殊的标记，只需要三个圆角图片给定义列表dl做背景。
- 圆角矩形一 顶部右侧无圆角
这里放置文字，只有三个圆角的圆角框，不需要定义特殊的标记，只需要三个圆角图片给定义列表dl做背景。
Html
<dl class="curved">
<dt>圆角矩形</dt>
<dd>
<p>css圆角矩形</p>
<p class="last">这里放置文字，四个圆角的圆角框，不需要定义特殊的标记，只需要四个圆角图片给定义列表dl做背景。</p>
</dd>
</dl>
<dl class="bot_rgt">
<dt>圆角矩形一 底部右侧无圆角</dt>
<dd>
<p>这里放置文字，只有三个圆角的圆角框，不需要定义特殊的标记，只需要三个圆角图片给定义列表dl做背景。</p>
</dd>
</dl>
<dl class="bot_lft">
<dt>圆角矩形一 底部左侧无圆角</dt>
<dd>
<p>这里放置文字，只有三个圆角的圆角框，不需要定义特殊的标记，只需要三个圆角图片给定义列表dl做背景。</p>
</dd>
</dl>
<dl class="top_rgt">
<dt>圆角矩形一 顶部右侧无圆角</dt>
<dd>
<p>这里放置文字，只有三个圆角的圆角框，不需要定义特殊的标记，只需要三个圆角图片给定义列表dl做背景。</p>
</dd>
</dl>
<dl class="top_lft">
<dt>圆角矩形一 顶部右侧无圆角</dt>
<dd>
<p>这里放置文字，只有三个圆角的圆角框，不需要定义特殊的标记，只需要三个圆角图片给定义列表dl做背景。</p>
</dd>
</dl>
Css
<style>
dl.curved {
background:#7f919c url(c_tl.gif) no-repeat scroll left top;
margin:50px auto;
padding:0;
width:50%;
}
dl.curved dt {
background:transparent url(c_tr.gif) no-repeat scroll right top;
color:#FFFFFF;
padding:10px;
text-align:center;
}
dl.curved dd {
background:#EEEEEE url(c_bl.gif) no-repeat scroll left bottom;
margin:0;
padding:0;
}
dl.curved dd p {
line-height:1.3em;
margin:0;
padding:10px;
}
dl.curved dd p.last {
background:transparent url(c_br.gif) no-repeat scroll right bottom;
}
dl.bot_rgt {
background:#7f919c url(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(c_tr.gif) top right no-repeat;
padding:10px;
text-align:center;
color:#fff;
}
dl.bot_rgt dd {
background:#eee url(c_bl.gif) bottom left no-repeat;
padding:0;
margin:0;
}
dl.bot_lft {
background:#7f919c url(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(c_tr.gif) top right no-repeat;
padding:10px;
text-align:center;
color:#fff;
}
dl.bot_lft dd {
background:#eee url(c_br.gif) bottom right no-repeat;
padding:0;
margin:0;
}
dl.top_rgt {
background:#eee url(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:#7f919c url(c_tl.gif) top left no-repeat;
padding:10px;
text-align:center;
color:#fff;
}
dl.top_rgt dd {
background:transparent url(c_br.gif) bottom right no-repeat;
padding:0;
margin:0;
}
dl.top_lft {
background:#eee url(c_bl.gif) bottom left no-repeat;
margin:5px 0;
padding:0;
float:left;
margin-right:10px;
width:40%;
}
dl.top_lft dt {
background:#7f919c url(c_tr.gif) top right no-repeat;
padding:10px;
text-align:center;
color:#fff;
}
dl.top_lft dd {
background:transparent url(c_br.gif) bottom right no-repeat;
padding:0;
margin:0;
}
dd p {
margin:0;
padding:10px;
line-height:1.3em;
}
</style>
上一篇：css圆角矩形的另类做法
下一篇：网站设计中的色彩设计—色彩的调和
在IE7和火狐上显示无圆角啊，不过方法不错，学了啊
在IE7和火狐上显示有原角啊，你是不是没刷新好，图片没出来啊？ 我的一切都正常
These kind of posts are always inspiring and I prefer to read quality content so I am happy to find out many good point here in the post, writing is simply great, thank you for the post.
我不知道为什么，但这个博客是我加载极其缓慢。其他人有这个问题，或者是我最终的一个问题？我将稍后再检查，如果问题仍然存在。
您好，我很高兴，我发现您的博客，我真的发现你的错误，而我是在Digg寻找别的东西，总之，我在这里现在只想说很多感谢一个了不起的职位，一个全方位的惊险博客（我也爱的主题/设计） ，我没有通过它分钟时间，但我已保存，还增加了你的RSS源，所以当我有时间我会回来的多读，请做保持了出色的工作。
我享受在其中，你提出了这个问题的方式，再加上它确实给我个人的一些考虑饲料。但是，通过什么我亲眼见过，我真的很希望作为实际反应桩上，男性和女性保持点上，没有办法走上当天的新闻后，一个肥皂。所有相同的，感谢你这个特殊的点，即使我不走，在总体构思，我尊重你的立场。