css圆角矩形的另类做法

今天发现了一个实现圆角矩形的另类做法。很好用哦，代码简洁,不用图片,不用JS,也不用cs3的样式的圆角矩形,可以用css随便变换颜色。它兼容各种浏览器。将一个小点文字放大变成了弧形，放到四个角落。每个角落用绝对位置，并且用Arial字体（Arial字体因为它是使用最安全）。如果你想调整圆角弧度的大小，不防试试用css调整一下各种属性。

Html

<div class="round_rectangle"> <em id="ctl"><b>•</b></em> <em id="cbl"><b>•</b></em> <em id="ctr"><b>•</b></em> <em id="cbr"><b>•</b></em>
    <p> 今天发现了一个实现圆角矩形的另类做法。
        这是一个没有用图片和cs3的样式的圆角矩形。它兼容各种浏览器。
        将一个小点文字放大变成了弧形，放到四个角落。
        每个角落用绝对位置，并且用Arial字体（Arial字体因为它是使用最安全）。如果你想调整圆角弧度的大小，不防试试用css调整一下各种属性。</p>
</div>

Css

<style>
.round_rectangle {
    background:#ecbd61;
    color:#000000;
    margin:5em auto;
    position:relative;
    width:250px;
}
#ctl, #cbl, #ctr, #cbr {
    background:#fff;
    color:#9CAF9C;
    font-style:normal;
    height:20px;
    overflow:hidden;
    position:absolute;
    width:20px;
    z-index:1;
}
#ctl {
    left:0;
    top:0;
}
#cbl {
    bottom:0;
    left:0;
}
#ctr {
    right:0;
    top:0;
}
#cbr {
    bottom:0;
    right:0;
}
.round_rectangle em b {
    color:#ecbd61;
    font-family:arial;
    font-size:150px;
    font-weight:normal;
    line-height:40px;
    position:absolute;
}
#ctl b {
    left:-8px;
}
#ctr b {
    left:-25px;
}
#cbl b {
    left:-8px;
    top:-17px;
}
#cbr b {
    left:-25px;
    top:-17px;
}
.round_rectangle p {
    font-size:12px;
    padding:10px 15px;
    position:relative;
    z-index:100;
    text-align:justify;
}
</style>