css 代码简练的圆角矩形

圆角矩形

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>