圓角矩形的html+css實現(xiàn)代碼

字號:


    閑來無事,突然又想起了圓角矩形的實現(xiàn)。不過這個話題大家已經(jīng)談了太長時間了。各種各樣的實現(xiàn)方案在網(wǎng)上都可以看到。這里僅僅是記錄一下個人認(rèn)為比較好的一個。這個方案不使用任何圖片,是純html+css實現(xiàn)。
    css代碼
    代碼如下:
    <style type="text/css">
    .spiffy{display:block}
    .spiffy *{
    display:block;
    height:1px;
    font-size:.01em;
    overflow:hidden;
    background:#b20000}
    .spiffy1{
    margin-left:3px;
    margin-right:3px;
    padding-left:1px;
    padding-right:1px;
    border-left:1px solid #870000;
    border-right:1px solid #870000;
    background:#9f0000}
    .spiffy2{
    margin-left:1px;
    margin-right:1px;
    padding-right:1px;
    padding-left:1px;
    border-left:1px solid #6f0000;
    border-right:1px solid #6f0000;
    background:#a30000}
    .spiffy3{
    margin-left:1px;
    margin-right:1px;
    border-left:1px solid #a30000;
    border-right:1px solid #a30000;}
    .spiffy4{
    border-left:1px solid #870000;
    border-right:1px solid #870000}
    .spiffy5{
    border-left:1px solid #9f0000;
    border-right:1px solid #9f0000}
    .spiffyfg{
    background:#b20000}
    </style>
    html代碼
    代碼如下:
    <div>
    <b>
    <b><b></b></b>
    <b><b></b></b>
    <b></b>
    <b></b>
    <b></b>
    </b>
    <div>
    &bull;&bull;&bull;
    </div>
    <b>
    <b></b>
    <b></b>
    <b></b>
    <b><b></b></b>
    <b><b></b></b>
    </b>
    </div>
    有興趣就試一下上面兩段代碼吧。