无图片取得圆角效果

CSS

 

  1body, table
  2{}{
  3    font-size: 100%;
  4    box-sizing: border-box;
  5    -moz-box-sizing: border-box;
  6}
  7body, form, input, table, td, button
  8{}{
  9    font-family: Verdana, Arial, Helvetica, sans-serif;
 10}
 11
 12
 13/**//* START rounded corners */
 14.topCorners, .bottomCorners
 15{}{
 16    display: block;
 17    height: 5px;
 18    overflow: hidden;
 19    padding: 0;
 20}
 21.topCorners *, .bottomCorners *
 22{}{
 23    display: block;
 24    height: 1px;
 25    overflow: hidden;
 26    padding: 0;
 27    line-height: 1px;
 28    font-size: 1px;
 29}
 30.l1
 31{}{
 32    margin: 0 5px;
 33}
 34.l2
 35{}{
 36    margin: 0 3px;
 37}
 38.l3
 39{}{
 40    margin: 0 2px;
 41}
 42.l4
 43{}{
 44    margin: 0 1px;
 45    height: 2px;
 46}
 47/**//* zoom:1; is to force IE to have "layout" for this element so the bottom corners that follow it don't go funny */
 48.styledPanel
 49{}{
 50    zoom: 1;
 51}
 52/**//* END rounded corners */
 53
 54/**//* START Personalization */
 55#recommended
 56{}{
 57    clear: both;
 58    margin: 1.32em 0 auto -10px;
 59}
 60
 61ol
 62{}{
 63    font: italic 1em Georgia, Times, serif;
 64    color: #999999;
 65}
 66ol p
 67{}{
 68    font: normal .8em Arial, Helvetica, sans-serif;
 69    color: #000000;
 70}
 71#recommended .styledPanel
 72{}{
 73    padding: 0 10px;
 74    background: #EBF2FA;
 75}
 76#recommended .styledPanel h4
 77{}{
 78    background: #7FB6CB;
 79    border-bottom: solid 1px #999999;
 80    margin: 0 -10px 8px;
 81    padding: 0 10px 5px 10px;
 82}
 83#recommended .styledPanel
 84{}{
 85    padding-bottom: 6px;
 86}
 87#recommended h4 a
 88{}{
 89    font-size: .85em;
 90    font-weight: normal;
 91}
 92#recommended .l2
 93{}{
 94    border-left: solid 2px #999999;
 95    border-right: solid 2px #999999;
 96}
 97#recommended .l3, #recommended .l4, #recommended .styledPanel
 98{}{
 99    border-left: solid 1px #999999;
    border-right: solid 1px #999999;
}
#recommended .l1
{}{
    background: #999999;
}
#recommended .topCorners .l2, #recommended .topCorners .l3, #recommended .topCorners .l4
{}{
    background: #7FB6CB;
}
#recommended .bottomCorners .l2, #recommended .bottomCorners .l3, #recommended .bottomCorners .l4
{}{
    background: #EBF2FA;
}

 

HTML

 

 1<div id="recommended">
 2            <div class="topCorners">
 3                <div class="l1">
 4                </div>
 5                <div class="l2">
 6                </div>
 7                <div class="l3">
 8                </div>
 9                <div class="l4">
                </div>
            </div>
            <div class="styledPanel">
                <h4>
                    Recommended Downloads | <a href="#" title="We are recommending collections of downloads that might interest you based on what you have viewed in the Download Center.">
                        What's this?</a></h4>
                <ol>
                    <li><a href="#">
                        Microsoft Internet Explorer 6.0</a></li>
                    <li><a href="#">
                        Microsoft ASP.NET</a></li>
                    <li><a href="#">
                        Microsoft .NET Framework</a></li>
                    <li><a href="#">
                        Microsoft .NET</a></li>
                </ol>
            </div>
            <div class="bottomCorners">
                <div class="l4">
                </div>
                <div class="l3">
                </div>
                <div class="l2">
                </div>
                <div class="l1">
                </div>
            </div>
        </div>

 

效果